Default example

Single accordion open fast by default

Item title 1
Item content 1

Accordion group

Item title 4
Item content 4
Alt example

Single accordion open fast by default

Item title 1
Item content 1

Accordion group

Item title 4
Item content 4
Dark example

Single accordion open fast by default

Item title 1
Item content 1

Accordion group

Item title 4
Item content 4
Dark alt example

Single accordion open fast by default

Item title 1
Item content 1

Accordion group

Item title 4
Item content 4
Markup: uikit/accordion/accordion.twig
<h3>Single accordion open fast by default</h3>
{%
  include '@govcms8_uikit/accordion/accordion.twig' with {
  id: id_1,
  title: title_1,
  body: body_1,
  orientation: orientation_1,
  speed: speed_1
} only
%}

<h3>Accordion group</h3>

<button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Open( document.querySelectorAll('.accordion-group .au-accordion__title') )">Open All</button>
<button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Close( document.querySelectorAll('.accordion-group .au-accordion__title') )">Close All</button>
<button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Toggle( document.querySelectorAll('.accordion-group .au-accordion__title') )">Toggle All</button>

<div class="accordion-group">
  {%
    include '@govcms8_uikit/accordion/accordion.twig' with {
    id: id_2,
    title: title_2,
    body: body_2,
    orientation: orientation_2,
    speed: speed_2
  } only
  %}
  {%
    include '@govcms8_uikit/accordion/accordion.twig' with {
    id: id_3,
    title: title_3,
    body: body_3,
    orientation: orientation_3,
    speed: speed_3
  } only
  %}
  {%
    include '@govcms8_uikit/accordion/accordion.twig' with {
    id: id_4,
    title: title_4,
    body: body_4,
    orientation: orientation_4,
    speed: speed_4
  } only
  %}
</div>
Source: uikit/accordion/_accordion.scss, line 1
Default example
Alt example
Dark example
Dark alt example
Markup: uikit/breadcrumb/breadcrumb.twig
{% include '@govcms8_uikit/breadcrumb/breadcrumb.twig' %}
Source: uikit/breadcrumb/_breadcrumb.scss, line 1
Default examples
Default styling

Link as button

.au-btn--secondary
Button --secondary.

Link as button

.au-btn--tertiary
Button --tertiary.

Link as button

.au-btn--block
Button --block.

Link as button

Alt examples
Default styling

Link as button

.au-btn--secondary
Button --secondary.

Link as button

.au-btn--tertiary
Button --tertiary.

Link as button

.au-btn--block
Button --block.

Link as button

Dark examples
Default styling

Link as button

.au-btn--secondary
Button --secondary.

Link as button

.au-btn--tertiary
Button --tertiary.

Link as button

.au-btn--block
Button --block.

Link as button

Dark alt examples
Default styling

Link as button

.au-btn--secondary
Button --secondary.

Link as button

.au-btn--tertiary
Button --tertiary.

Link as button

.au-btn--block
Button --block.

Link as button

Markup: uikit/button/button.twig
<p>
  <button class="au-btn {{modifier_class}}" type="button">Standard button</button>
  <button class="au-btn {{modifier_class}}" type="button" disabled>Disabled button</button>
</p>
<p>
  <input class="au-btn {{modifier_class}}" type="button" value="Input type button">
  <input class="au-btn {{modifier_class}}" type="button" value="Disabled input type button" disabled>
</p>
<p>
  <a class="au-btn {{modifier_class}}" href="#">Link as button</a>
</p>
Source: uikit/button/_button.scss, line 1
Default examples
Default styling
.au-header--hero
Hero header with bigger paddings.
Alt examples
Default styling
.au-header--hero
Hero header with bigger paddings.
Dark examples
Default styling
.au-header--hero
Hero header with bigger paddings.
Dark alt examples
Default styling
.au-header--hero
Hero header with bigger paddings.
Markup: uikit/header/header.twig
{% include '@govcms8_uikit/header/header.twig' %}
Source: uikit/header/_header.scss, line 1
Default example
Alt example
Dark example
Dark alt example
Markup: uikit/inpage-nav/inpage_nav.twig
{% include '@govcms8_uikit/inpage-nav/inpage_nav.twig' %}
Source: uikit/inpage-nav/_inpage_nav.scss, line 1
Default example
Alt example
Dark example
Dark alt example
Markup: uikit/keyword-list/keyword_list.twig
{% include '@govcms8_uikit/keyword-list/keyword_list.twig' %}
Source: uikit/keyword-list/_keyword_list.scss, line 1
Default examples
Default styling
.au-page-alerts--info
Page alert info.
.au-page-alerts--warning
Page alert warning.
.au-page-alerts--error
Page alert error.
.au-page-alerts--success
Page alert success.
Alt examples
Default styling
.au-page-alerts--info
Page alert info.
.au-page-alerts--warning
Page alert warning.
.au-page-alerts--error
Page alert error.
.au-page-alerts--success
Page alert success.
Dark examples
Default styling
.au-page-alerts--info
Page alert info.
.au-page-alerts--warning
Page alert warning.
.au-page-alerts--error
Page alert error.
.au-page-alerts--success
Page alert success.
Dark alt examples
Default styling
.au-page-alerts--info
Page alert info.
.au-page-alerts--warning
Page alert warning.
.au-page-alerts--error
Page alert error.
.au-page-alerts--success
Page alert success.
Markup: uikit/page-alerts/page_alerts.twig
{% extends '@govcms8_uikit/page-alerts/page_alerts.twig' %}
Source: uikit/page-alerts/_page_alerts.scss, line 1
Markup: uikit/progress-indicator/progress_indicator.twig
{% include '@govcms8_uikit/progress-indicator/progress_indicator.twig'%}
Source: uikit/progress-indicator/_progress_indicator.scss, line 1
Default example
  • foo
  • bar
  • baz
  • bloop
  • blip
  • wallop
  • doodle
  • pear ice cream
  • baz
Alt example
  • foo
  • bar
  • baz
  • bloop
  • blip
  • wallop
  • doodle
  • pear ice cream
  • baz
Dark example
  • foo
  • bar
  • baz
  • bloop
  • blip
  • wallop
  • doodle
  • pear ice cream
  • baz
Dark alt example
  • foo
  • bar
  • baz
  • bloop
  • blip
  • wallop
  • doodle
  • pear ice cream
  • baz
Markup: uikit/tags/tags.twig
{% extends '@govcms8_uikit/tags/tags.twig' %}
Source: uikit/tags/_tags.scss, line 1