EvoToolkit - v2.3.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

Dependencies
This part requires one or more other parts to display properly. If this is enabled and a dependency isn't, it will automatically be imported.

  • 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 o-box--spacing-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 o-box--spacing-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 BorderDisabled

This is disabled by default. Enable block variable $component-expander-content-border-modifier or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

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 o-box--spacing-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 o-box--spacing-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