1.1 UI-Kit.accordion UI-Kit Accordion
Accordion component.
Default example
Alt example
Dark example
Dark alt example
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
1.4 UI-Kit.cta-link UI-Kit CTA Link
Click to action link.
Markup: uikit/cta-link/cta_link.twig
{% include '@govcms8_uikit/cta-link/cta_link.twig' %}
Source:
uikit/cta-link/_cta-link.scss
, line 1
1.5 UI-Kit.header UI-Kit Header
Tags to apply a taxonomy and link to similar content.
Default examples
Default styling
GovCMS is awesome
.au-header--hero
Hero header with bigger paddings.
GovCMS is awesome
Alt examples
Default styling
GovCMS is awesome
.au-header--hero
Hero header with bigger paddings.
GovCMS is awesome
Dark examples
Default styling
GovCMS is awesome
.au-header--hero
Hero header with bigger paddings.
GovCMS is awesome
Dark alt examples
Default styling
GovCMS is awesome
.au-header--hero
Hero header with bigger paddings.
GovCMS is awesome
Markup: uikit/header/header.twig
{% include '@govcms8_uikit/header/header.twig' %}
Source:
uikit/header/_header.scss
, line 1
1.7 UI-Kit.keyword-list UI-Kit Keyword List
Tags to apply a taxonomy and link to similar content.
Default example
- Department of Agriculture and Water Resources
- Department of Communications and the Arts
- Department of Communications
- Department of Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi qui praesentium fuga
- Department of Agriculture and Water Resources
Alt example
- Department of Agriculture and Water Resources
- Department of Communications and the Arts
- Department of Communications
- Department of Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi qui praesentium fuga
- Department of Agriculture and Water Resources
Dark example
- Department of Agriculture and Water Resources
- Department of Communications and the Arts
- Department of Communications
- Department of Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi qui praesentium fuga
- Department of Agriculture and Water Resources
Dark alt example
- Department of Agriculture and Water Resources
- Department of Communications and the Arts
- Department of Communications
- Department of Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi qui praesentium fuga
- Department of Agriculture and Water Resources
Markup: uikit/keyword-list/keyword_list.twig
{% include '@govcms8_uikit/keyword-list/keyword_list.twig' %}
Source:
uikit/keyword-list/_keyword_list.scss
, line 1
1.8 UI-Kit.link-list UI-Kit Link List
Tags to apply a taxonomy and link to similar content.
Default examples
Alt examples
Dark examples
Markup: uikit/link-list/link_list.twig
{% include '@govcms8_uikit/link-list/link_list.twig' %}
Source:
uikit/link-list/_link_list.scss
, line 1
1.9 UI-Kit.page-alerts UI-Kit Page alerts
Tags to apply a taxonomy and link to similar content.
Default examples
Default styling
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--info
Page alert info.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--warning
Page alert warning.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--error
Page alert error.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--success
Page alert success.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
Alt examples
Default styling
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--info
Page alert info.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--warning
Page alert warning.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--error
Page alert error.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--success
Page alert success.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
Dark examples
Default styling
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--info
Page alert info.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--warning
Page alert warning.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--error
Page alert error.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--success
Page alert success.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
Dark alt examples
Default styling
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--info
Page alert info.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--warning
Page alert warning.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--error
Page alert error.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
.au-page-alerts--success
Page alert success.
Status message
- We will never contact you in person over the phone to make a payment.
- Please enter a valid email address.
Markup: uikit/page-alerts/page_alerts.twig
{% extends '@govcms8_uikit/page-alerts/page_alerts.twig' %}
Source:
uikit/page-alerts/_page_alerts.scss
, line 1
1.10 UI-Kit.progress-indicator UI-Kit Progress indicator
Tags to apply a taxonomy and link to similar content.
Default example
Alt example
Dark example
Markup: uikit/progress-indicator/progress_indicator.twig
{% include '@govcms8_uikit/progress-indicator/progress_indicator.twig'%}
Source:
uikit/progress-indicator/_progress_indicator.scss
, line 1