SGDS provides helper classes to display elements for different screensizes via media queries


CSS display classes

You can use one of the displayclasses:

  • is-block
  • is-flex
  • is-inline
  • is-inline-block
  • is-inline-flex
Example on how is-flex works:
Class Mobile Up to 768px Tablet between 768px to 1023px Desktop between 1024px to 1215px Widescreen between 1216px to 1407px FullHD from 1408px and above
is-flex flex unchanged unchanged unchanged unchanged
is-flex-mobile unchanged flex unchanged unchanged unchanged
is-flex-desktop-only unchanged unchanged flex unchanged unchanged
is-flex-widescreen-only unchanged unchanged unchanged flex unchanged
Helper classes to display element for different screensizes
Class Mobile Up to 768px Tablet between 768px to 1023px Desktop between 1024px to 1215px Widescreen between 1216px to 1407px FullHD from 1408px and above
is-flex-touch flex flex unchanged unchanged unchanged
is-flex-tablet unchanged flex flex flex flex
is-flex-desktop unchanged unchanged flex flex flex
is-flex-widescreen unchanged unchanged unchanged flex flex
is-flex-fullhd unchanged unchanged unchanged unchanged flex

For the other display options, just replace is-flex with is-block is-inline is-inline-block or is-inline-flex.
Example is-inline-block-fullhd


Hiding content for different displays
Class Mobile Up to 768px Tablet between 768px to 1023px Desktop between 1024px to 1215px Widescreen between 1216px to 1407px FullHD from 1408px and above
is-hidden-mobile hidden visible visible visible visible
is-hidden-tablet-only visible hidden visible visible visible
is-hidden-desktop-only visible visible hidden visible visible
is-hidden-widescreen-only visible visible visible hidden visible
Helper classes to hide element for different screensizes
Class Mobile Up to 768px Tablet between 768px to 1023px Desktop between 1024px to 1215px Widescreen between 1216px to 1407px FullHD from 1408px and above
is-hidden-touch hidden hidden visible visible visible
is-hidden-tablet visible hidden hidden hidden hidden
is-hidden-desktop visible visible hidden hidden hidden
is-hidden-widescreen visible visible visible hidden hidden
is-hidden-fullhd visible visible visible visible hidden