EvoToolkit - v3.0.0 (Changelog)

Expander

A decorated expander which sits atop the expander object pattern.

If you include the expander's ID as a URL hash (For example /my-page#my-expander-name), the expander will automatically open on page load.

Source

Contributors

Luke Harrison
  • Overview
  • Theming

Base

Standard

Toggle Expander

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.

Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.

Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.

<div class="o-expander c-expander"> <div class="o-box u-p-small o-expander__trigger c-box c-box--rounded c-expander__header" tabindex="0"> <div class="o-layout o-layout--fit u-flex-middle"> <div class="o-layout__item u-width-grow"> <h2 class="c-type-echo">Toggle Expander</h2> </div> <div class="o-layout__item u-width-shrink"> <div class="c-expander__header-icon"></div> </div> </div> </div> <div class="o-expander__content c-expander__content"> <div class="o-box u-p-small"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.</p> <p>Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.</p> <p>Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.</p> <p class="u-align-center"> <button class="o-expander__trigger c-button" data-expander-behaviour="close">Close</button> </p> </div> </div> </div>

Content Border

Toggle Expander

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.

Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.

Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.

<div class="o-expander c-expander c-expander--content-border"> <div class="o-box u-p-small o-expander__trigger c-box c-box--rounded c-expander__header" tabindex="0"> <div class="o-layout o-layout--fit u-flex-middle"> <div class="o-layout__item u-width-grow"> <h2 class="c-type-echo">Toggle Expander</h2> </div> <div class="o-layout__item u-width-shrink"> <div class="c-expander__header-icon"></div> </div> </div> </div> <div class="o-expander__content c-expander__content"> <div class="o-box u-p-small"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.</p> <p>Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.</p> <p>Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.</p> <p class="u-align-center"> <button class="o-expander__trigger c-button" data-expander-behaviour="close">Close</button> </p> </div> </div> </div>

You can theme the expander component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.

Below is a list of theme variables and their default values.

Theme Variables

Theme Variables Default
$component-expander-header-background-color very-light
$component-expander-accent-color primary
$component-expander-border-color light