GCDS Layout - Core

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Heading 5 (h5)
Heading 6 (h6)

Paragraph - default appearance

Link

  1. ordered list (ol) - level 1
  2. ordered list (ol) - level 1
    1. ordered list (ol) - level 2
    2. ordered list (ol) - level 2
      1. ordered list (ol) - level 3
      2. ordered list (ol) - level 3
Table caption
Table header (th) Table header (th) Table header (th) Table header (th)
Table data (td) Table data (td) Table data (td) Table data (td)
Table data (td) Table data (td) Table data (td) Table data (td)
Table data (td) Table data (td) Table data (td) Table data (td)

Section with limited width content

Add the CSS class name .cnt-wdth-lmtd to a sectioning element <section class="cnt-wdth-lmtd">...<section> inside the main content of your page. More guidance are provided in the Content and IA specification.

Section example with limited width content

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. This is a very long word pneumonoultramicroscopicsilicovolcanoconiosis.

Call to action button

Add the CSS class name .btn-call-to-action to a your button or link that define the main call for action for a page. For example the initiation button/link in a service initiation pages. More guidance are provided in the Content and IA specification.

Link

[Call to action] 

<p><a class="btn btn-call-to-action" href="#">[Call to action]</a></p>

Button

<button class="btn btn-call-to-action" type="button">[Call to action]</button>

Page details

Date modified: