Accordion
About
What does it do?
- Allows users to reveal or hide related content on a page
When to use it?
- When users need only a few key pieces of content on a single page.
- When you want users to have control over the content by expanding it or hiding it (progressive disclosure).
- When you have long, content rich pages and you need to simplify and reduce the amount of content or keep the content on the single page separated by headings.
- When you want users to use headings to navigate quickly to specific sections of the page (Information architecture).
When not to use it?
- When you are presenting essential information and users care about many topics on the page. If users need to open majority of subtopics to have their questions answered, it will require extra effort and click. Hiding content behind navigation diminishes user's awareness of it.
Closed
In its closed state, the accordions .wmcads-accordion__content is hidden from view.
Everything you can see whilst the accordion is in this state is nested within the button.wmcads-accordion-summary-wrapper element.
Take note that:
- The attribute
aria-controlsis equal to the id set on the.wmcads-accordion__contentelement. This helps with accessibility, so that screen readers understand that x button controls x content. - The attribute
aria-expandedis set to "false" when in the closed state. Again, this helps with accessibility. - The only thing not visible in the
button.wmcads-accordion-summary-wrapperis the minimise icon.
Some random subtitle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
HTML markup
<div class="wmcads-accordion">
+ Skip to main content
Accordion
About
What does it do?
- Allows users to reveal or hide related content on a page
When to use it?
- When users need only a few key pieces of content on a single page.
- When you want users to have control over the content by expanding it or hiding it (progressive disclosure).
- When you have long, content rich pages and you need to simplify and reduce the amount of content or keep the content on the single page separated by headings.
- When you want users to use headings to navigate quickly to specific sections of the page (Information architecture).
When not to use it?
- When you are presenting essential information and users care about many topics on the page. If users need to open majority of subtopics to have their questions answered, it will require extra effort and click. Hiding content behind navigation diminishes user's awareness of it.
Closed
In its closed state, the accordions .wmcads-accordion__content is hidden from view.
Everything you can see whilst the accordion is in this state is nested within the button.wmcads-accordion-summary-wrapper element.
Take note that:
- The attribute
aria-controls is equal to the id set on the .wmcads-accordion__content element. This helps with accessibility, so that screen readers understand that x button controls x content. - The attribute
aria-expanded is set to "false" when in the closed state. Again, this helps with accessibility. - The only thing not visible in the
button.wmcads-accordion-summary-wrapper is the minimise icon.
Some random subtitle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
HTML markup
<div class="wmcads-accordion">
<button aria-controls="accordion-01" class="wmcads-accordion__summary-wrapper" aria-expanded="false">
<!-- accordion summary -->
<div class="wmcads-accordion__summary">
diff --git a/docs/components/breadcrumb/index.html b/docs/components/breadcrumb/index.html
index a10e07ae..497e6751 100755
--- a/docs/components/breadcrumb/index.html
+++ b/docs/components/breadcrumb/index.html
@@ -4,7 +4,7 @@
upgrade your browser to improve your experience and
security.
- Skip to main contentBreadcrumb
About
What does it do?
- Breadcrumbs help users to understand where they are within a website’s structure.
When to use it?
- When you need to help users understand and move between the multiple levels of a website.
- Always make sure that the breadcrumb is contained within a
.wmcads-container element. This ensures that the breadcrumb doesn't scale the size of large browser windows. - When displaying the current page within the breadcrumb, ensure that the modifier class
.wmcads-breadcrumb__link--current as seen below.
When not to use it?
- When websites have flat structure
HTML markup
<nav aria-label="Main example breadcrumbs" class="wmcads-breadcrumb">
+ Skip to main contentBreadcrumb
About
What does it do?
- Breadcrumbs help users to understand where they are within a website’s structure.
When to use it?
- When you need to help users understand and move between the multiple levels of a website.
- Always make sure that the breadcrumb is contained within a
.wmcads-container element. This ensures that the breadcrumb doesn't scale the size of large browser windows. - When displaying the current page within the breadcrumb, ensure that the modifier class
.wmcads-breadcrumb__link--current as seen below.
When not to use it?
- When websites have flat structure
HTML markup
<nav aria-label="Main example breadcrumbs" class="wmcads-breadcrumb">
<ol class="wmcads-breadcrumb__list">
<li class="wmcads-breadcrumb__list-item">
<a href="/" class="wmcads-breadcrumb__link">
diff --git a/docs/components/buttons/index.html b/docs/components/buttons/index.html
index 7e44e292..34a3738b 100755
--- a/docs/components/buttons/index.html
+++ b/docs/components/buttons/index.html
@@ -4,7 +4,41 @@
upgrade your browser to improve your experience and
security.
- Skip to main contentButtons
About
Buttons should be used in situations where a user might need to preform an action, such as:
- Submitting a form
- Uploading
- Specify a next or previous step in a process
- Begin a new task
There are two types of button used in this design system - buttons and link buttons:
- A button performs an action on a page
- A link button takes the user to a different page
Icons should only be used where it is deemed absolutely necessary to communicate the meaning of an action.
Primary buttons
What does it do?
- Gives users alternative to the call to action button.
When to use it?
- When action is not as important as a call to action so it shouldn’t call as much attention.
- When a button typically indicates actions that are important but not the call to action on a page.
- Can be used in isolation or in conjunction with call to action button and secondary.
When not to use it?
- When a button is essential for continuing the user journey
- When a button is a destructive action
- When a button starts a process or journey
HTML markup
<button class="wmcads-btn wmcads-btn--primary" >
+ Skip to main contentButtons
About
Buttons should be used in situations where a user might need to preform an action, such as:
- Submitting a form
- Uploading
- Specify a next or previous step in a process
- Begin a new task
There are two types of button used in this design system - buttons and link buttons:
- A button performs an action on a page
- A link button takes the user to a different page
Icons should only be used where it is deemed absolutely necessary to communicate the meaning of an action.
Call to action buttons
What does it do?
- Encourages the most desired action you want visitors to take.
- Attracts attention on the page.
When to use it?
- When you need a strong visual indicator to help user to complete their journey and do their task.
- When you need action oriented button. Think: 'Done', 'Save', 'Next', 'Submit'.
- Use the Dark background variant when a Call to action button will be used against a background with a dark colour, such as primary purple.
When not to use it?
- What action you want users to take is not essential in completing their task.
- When a button is a destructive action.
- When a button starts a process or journey.
HTML markup
<button class="wmcads-btn" >
+ Call to action button
+</button>
<button class="wmcads-btn wmcads-is--active" >
+ Call to action active button
+</button>
<button class="wmcads-btn wmcads-btn--disabled" disabled="disabled" >
+ Call to action disabled button
+</button>
<button class="wmcads-btn" >
+ Call to action icon button
+ <svg class="wmcads-btn__icon wmcads-btn__icon--right">
+ <use xlink:href="#wmcads-general-chevron-right" href="#wmcads-general-chevron-right"></use>
+ </svg>
+</button>
<button class="wmcads-btn" >
+ Call to action loading button<!-- btn sized loader -->
+ <div class="wmcads-loader wmcads-loader--btn wmcads-btn__icon wmcads-btn__icon--right" role="alert" aria-live="assertive">
+ <p class="wmcads-loader__content">Content is loading...</p>
+ </div>
+</button>
<button class="wmcads-btn wmcads-btn--disabled" disabled="disabled" >
+ Call to action icon disabled button
+ <svg class="wmcads-btn__icon wmcads-btn__icon--right">
+ <use xlink:href="#wmcads-general-chevron-right" href="#wmcads-general-chevron-right"></use>
+ </svg>
+</button>
Nunjucks markup
{% from "wmcads/components/button/_button.njk" import wmcadsButton %}
+
+{{
+ wmcadsButton({
+ classNames: "wmcads-btn--mode",
+ text: "Metro",
+ iconLeft: "modes-isolated-metro"
+ })
+}}
+
Dark background variant
HTML markup
<button class="wmcads-btn wmcads-btn--dark-bg" >
+ Call to action dark bg button
+</button>
<button class="wmcads-btn wmcads-btn--dark-bg wmcads-is--active" >
+ Call to action dark bg active button
+</button>
Primary buttons
What does it do?
- Gives users alternative to the call to action button.
When to use it?
- When action is not as important as a call to action so it shouldn’t call as much attention.
- When a button typically indicates actions that are important but not the call to action on a page.
- Can be used in isolation or in conjunction with call to action button and secondary.
When not to use it?
- When a button is essential for continuing the user journey
- When a button is a destructive action
- When a button starts a process or journey
HTML markup
<button class="wmcads-btn wmcads-btn--primary" >
Primary button
</button>
<button class="wmcads-btn wmcads-btn--primary wmcads-is--active" >
Primary active button
@@ -72,6 +106,36 @@
<svg class="wmcads-btn__icon wmcads-btn__icon--right">
<use xlink:href="#wmcads-general-chevron-right" href="#wmcads-general-chevron-right"></use>
</svg>
+</button>
Mode buttons
What does it do?
- Lets the user select a mode of transport by which to filter
When to use it?
- Filtering results or data by mode
- Filtering a map by mode
When not to use it?
- When a button is essential for continuing the user journey
- When a button is a destructive action
- When a button starts a process or journey
HTML markup
<button class="wmcads-btn wmcads-btn--mode" >
+ <svg class="wmcads-btn__icon">
+ <use xlink:href="#wmcads-modes-isolated-bus" href="#wmcads-modes-isolated-bus"></use>
+ </svg>
+ Bus
+</button>
<button class="wmcads-btn wmcads-btn--mode wmcads-is--active" >
+ <svg class="wmcads-btn__icon">
+ <use xlink:href="#wmcads-modes-isolated-bus" href="#wmcads-modes-isolated-bus"></use>
+ </svg>
+ Bus active
+</button>
<button class="wmcads-btn wmcads-btn--mode" >
+ <svg class="wmcads-btn__icon">
+ <use xlink:href="#wmcads-modes-isolated-rail" href="#wmcads-modes-isolated-rail"></use>
+ </svg>
+ Train
+</button>
<button class="wmcads-btn wmcads-btn--mode" >
+ <svg class="wmcads-btn__icon">
+ <use xlink:href="#wmcads-modes-isolated-metro" href="#wmcads-modes-isolated-metro"></use>
+ </svg>
+ Metro
+</button>
<button class="wmcads-btn wmcads-btn--mode" >
+ <svg class="wmcads-btn__icon">
+ <use xlink:href="#wmcads-modes-isolated-roads" href="#wmcads-modes-isolated-roads"></use>
+ </svg>
+ Roads
+</button>
<button class="wmcads-btn wmcads-btn--mode wmcads-btn--disabled" disabled="disabled" >
+ <svg class="wmcads-btn__icon">
+ <use xlink:href="#wmcads-modes-isolated-bus" href="#wmcads-modes-isolated-bus"></use>
+ </svg>
+ Disabled mode button
</button>