Button
Buttons can be used with different html attributes.
<button class="btn">Button</button>
<button class="btn" disabled>Button disabled</button>
<a href="#" class="btn">Link Button</a>
<input type="submit" class="btn" value="Submit button" />Disabled
You can disable buttons by setting the disabled or aria-disabled="true" attribute.
<button class="btn" aria-disabled="true">Disabled by aria</button>
<button class="btn" disabled>Disabled</button>Colors
We are using the colorset classes to change button color. Per default the button will use the current defined accent colors from the upper colorset definition.
<button class="btn">Button (use current accent colors)</button>
<button class="btn cs-primary">Button (use primary colorset)</button>Hover effect
The hover effect when using bg colors is disabled when using disabled attributes. Or you can manually disable the hover effect with .no-hover.
<button class="btn" aria-disabled="true">Disabled by aria</button>
<button class="btn" disabled>Disabled</button>
<button class="btn no-hover">No hover</button>Control
The .control class is used as base for all controls either by extending or using the class directly.
<a class="control">Link control</a><br>
<button type="button" class="control">Button control</button><br>
<button type="button" class="control" disabled>Button control disabled</button><br>
<button type="button" class="control no-hover">Disable hover effect</button><br>Image
We are using the <picture> tag to display images. Using source to give different images sizes for specific image widths. In this example, we have two
different images for 260px and 520px width. If the image is smaller than 260px, the first image will be displayed. If the image is smaller than 260px
the 260x260 preview image will be used.
You can set the loading="lazy" attribute to lazy load the image.
<picture class="image">
<source media="(max-width: 260px)" srcset="img/preview-260x260.png">
<source media="(max-width: 520px)" srcset="img/preview-520x520.png">
<img alt="Image Preview" src="img/preview-520x520.png" width="520" height="520"/>
</picture>Accordion
Accordion component that uses the base expand functionality with aria-expanded and aria-controls. Each accordion item consists of a control (button) and content area.
For single-select accordions, use data-accordion="single" on the accordion container.
For animated accordions, add data-animate="accordion" to content areas.
<div class="accordion">
<div class="item">
<button class="control chevron" aria-expanded="false" aria-controls="content-1">
Item 1 Header
</button>
<div class="content" id="content-1" hidden>
Item 1 content goes here
</div>
</div>
<div class="item">
<button class="control chevron" aria-expanded="false" aria-controls="content-2">
Item 2 Header
</button>
<div class="content" id="content-2" hidden>
Item 2 content goes here
</div>
</div>
</div>Accordion with Chevron
Accordion control with chevron indicator
<div class="accordion">
<div class="item">
<button class="control chevron" aria-expanded="false" aria-controls="content-1">
Header with chevron
</button>
<div class="content" id="content-1" hidden>Content here</div>
</div>
</div>Single-select Accordion
Single-select accordion where only one item can be open at a time. Use data-accordion="single"
on the accordion container to enable single-select behavior.
<div class="accordion" data-accordion="single">
<div class="item">
<button class="control chevron" aria-expanded="false" aria-controls="single-1">
Item 1
</button>
<div class="content" id="single-1" hidden>Content 1</div>
</div>
<div class="item">
<button class="control chevron" aria-expanded="false" aria-controls="single-2">
Item 2
</button>
<div class="content" id="single-2" hidden>Content 2</div>
</div>
</div>Accordion with Animation
Animation classes for accordion content
<div class="accordion">
<div class="item">
<button class="control chevron" aria-expanded="false" aria-controls="animated-1">
Animated accordion
</button>
<div class="content" id="animated-1" hidden data-animate="accordion">
Animated content
</div>
</div>
</div>