GC Design SystemCSS Shortcuts
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Responsive layout

The responsive layout prefix applies a class only to the specified screen size. It can be added to any class. A class without a prefix will apply to all screen sizes. Adding breakpoints directly to the classes lets you to create responsive layouts without writing custom CSS. Overview
CSS Shortcut class Applied style Minimum width 
xs:
 
@media (width > 30em) { ... }
 
480px
 
sm:
 
@media (width > 40em) { ... }
 
640px
 
md:
 
@media (width > 48em) { ... }
 
768px
 
lg:
 
@media (width > 64em) { ... }
 
1024px
 
xl:
 
@media (width > 80em) { ... }
 
1280px

Examples

Breakpoint
md:<class>

This element displays as a block if the screen size is bigger than 48em. If the screen size is smaller, it will be displayed as an inline-block. 

<p class="md:d-block d-inline-block">
  This element displays as a block if the screen size is
  bigger than 48em. If the screen size is smaller, it will
  be displayed as an inline-block.
</p>
2025-10-01