Buttons
Two different varieties of button are available in the design system.
Primary button
- Use sparingly, ideally only once per page.
- Ideal for important actions like form submission.
- For H5P content, all buttons use this style due to limitations.
<button class="btn btn-primary" >Primary button</button>
Default state
- Follows Bootstrap's
btn-outline-secondary
style. - Use for most buttons on a page.
<button class="btn btn-default">Button label</button>
Secondary Button
- Best for less prominent actions.
- Uses interface-grey for the border.
- Rollovers match the default state.
- Sized to match height of other buttons. Override height to create more compact buttons
<button class="btn btn-secondary">Button label</button>
Icon Button
- An extension of small button with an icon added.
- Currently, print and embed buttons are available in the system.
- Additional icons will be added as needed.
<button class="btn btn-print">Print</button>
<button class="btn btn-embed">Embed</button>
Creating a New Icon Button
Design Icons:
- Create in software like Adobe Illustrator.
- Use a 32x32 box, with content in a 20x20 area.
Export and Minify:
- Export the icon as SVG.
- Minify using a tool like svgminify.com.
Convert for CSS:
- Convert special characters:
<
,>
,#
to their ascii equivalents :%3C
,%3E
and%23
. - Replace any double quotes with single quotes
- Paste the SVG code into the CSS.
- Remember to provide a dark mode version of the code, converting any fills and strokes from #e61f2a to #E6636A
- Use the convertor below to generate the code
.btn-embed::before {
content: url("data:image/svg+xml, svg code here");
}
// Dark mode
@include color-mode(dark) {
.btn-embed::before {
content: url("data:image/svg+xml, svg code with fills and strokes replaced");
}
}
Other
The prev and next links at the bottom of the page need to be visually prominent. While they take some styling cues from buttons to achieve this, they are in fact links. Visit the links page for more information.
SVG Code Converter
Enter the short name for your button and paste your SVG code below: