Zero Deaths Maryland Component Library

Variants: Alt 

<div class="variant theme-default">
    Some Text<br><br>
    <img src="https://images.fastspot.com/framework/300x200/1" /><br><br>
    <em>I'm in my own file because lots of markup changed. Look, an image above!</em><br><br>
    <em>You'll also notice I inherited the default context, since I did supply any in my variant.
</div>
 
<div class="variant theme-{{ theme }}">
	{{ text }}<br><br>
	<img src="https://images.fastspot.com/framework/300x200/{{ image }}" /><br><br>
	<em>I'm in my own file because lots of markup changed. Look, an image above!</em><br><br>
	<em>You'll also notice I inherited the default context, since I did supply any in my variant.
</div>

Variants

Variants allow you to create different context for the same component.

Use cases

  • Theming
  • Showing / hiding optional fields

Adding Variants

  1. Through the variants array in the components respective [component].config.js
  2. Through a specially named file in the same folder; [component]--variant-name.twig
    • example: accordion--alt.twig - The Accordion component with a variant called “Alt”

via config file

This option should be used when the underlying markup does not change. Example scenarious would be:

  • Theming - changing a modifier variable
  • Optional Fields - hiding optional fields, such as a title or description
  • Showing / Hiding Specific Fields - for example, showing the video variant vs the image variant in a page header

via new file

This option should only be used when underlying markup will change significantly. Example scenarious would be:

  • Complex Optional Fields - if keeping all the markup in the same file would create complex if / else statement
  • Additional / Different Markup - The same component is used in two places, with different underlying markup or subcomponents

Updating context for each modifier

See examples/variants/variants.config.js