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

Display

The display class sets the display property. It changes how containers are arranged on a page. Overview
CSS Shortcut class Applied style 
d-block
 
display: block;
 
d-inline
 
display: inline;
 
d-inline-block
 
display: inline-block;
 
d-flex
 
display: flex;
 
d-inline-flex
 
display: inline-flex;
 
d-grid
 
display: grid;
 
d-inline-grid
 
display: inline-grid;
 
d-table
d-table-row
d-table-cell
 
display: table;
display: table-row;
display: table-cell;
 
d-inline-table
d-table-row
d-table-cell
 
display: inline-table;
display: table-row;
display: table-cell;
 
d-none
 
display: none;

Examples

Block
d-block

This element is a block container. It starts on a new line and takes up the whole width.

1

2

3

<div>
  <p class="d-block">1</p>
  <p class="d-block">2</p>
  <p class="d-block">3</p>
</div>

Inline
d-inline

This element is an inline container, but height and width properties will be ignored.

1

2

3 

<div>
  <p class="d-inline" style="width: 10rem">1</p>
  <p class="d-inline" style="width: 10rem">2</p>
  <p class="d-inline" style="width: 10rem">3</p>
</div>

Inline block
d-inline-block

This element is an inline block and height and width properties can be applied.

1

2

3 

<div>
  <p class="d-inline-block" style="width: 10rem">1</p>
  <p class="d-inline-block" style="width: 10rem">2</p>
  <p class="d-inline-block" style="width: 10rem">3</p>
</div>

Flex
d-flex

This element is a block-level flex container.

1

2

3

<div class="d-flex gap-300">
  <p class="flex-1">1</p>
  <p class="flex-1">2</p>
  <p class="flex-1">3</p>
</div>

Inline flex
d-inline-flex

This element is an inline flex container.

1

2

3

<div class="d-inline-flex gap-300">
  <p class="flex-1">1</p>
  <p class="flex-1">2</p>
  <p class="flex-1">3</p>
</div>

Grid
d-grid

This element is a block-level grid container.

1

2

3

4

5

6

<div class="d-grid grid-cols-3 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Inline grid
d-inline-grid

This element is an inline grid container.

1

2

3

4

5

6

<div class="d-inline-grid grid-cols-3 gap-300">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Table
d-table
d-table-row
d-table-cell

This element behaves like a table element. Use all 3 classes to define how many rows and cells are in the table. Use the semantic HTML tags table, tr, td whenever possible.
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
<div class="d-table">
  <div class="d-table-row">
    <div class="d-table-cell">Cell 1</div>
    <div class="d-table-cell">Cell 2</div>
    <div class="d-table-cell">Cell 3</div>
    <div class="d-table-cell">Cell 4</div>
  </div>
  <div class="d-table-row">
    <div class="d-table-cell">Cell 5</div>
    <div class="d-table-cell">Cell 6</div>
    <div class="d-table-cell">Cell 7</div>
    <div class="d-table-cell">Cell 8</div>
  </div>
</div>

Inline table
d-inline-table
d-table-row
d-table-cell

This element behaves like an inline table element. Use all 3 classes to define how many rows and cells are in the inline table. Use the semantic HTML tags table, tr, td whenever possible.
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
<div class="d-inline-table">
  <div class="d-table-row">
    <div class="d-table-cell">Cell 1</div>
    <div class="d-table-cell">Cell 2</div>
  </div>
  <div class="d-table-row">
    <div class="d-table-cell">Cell 3</div>
    <div class="d-table-cell">Cell 4</div>
  </div>
</div>
<div class="d-inline-table">
  <div class="d-table-row">
    <div class="d-table-cell">Cell 5</div>
    <div class="d-table-cell">Cell 6</div>
  </div>
  <div class="d-table-row">
    <div class="d-table-cell">Cell 7</div>
    <div class="d-table-cell">Cell 8</div>
  </div>
</div>

None
d-none

This element will be completely removed.

<p class="d-none">
  This element will be completely removed.
</p>
Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:
  • xs: > 480px
  • sm: > 640px
  • md: > 768px
  • lg: > 1024px
  • xl: > 1280px
<div class="xs:d-block ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01