New College of Florida Component Library

Variants 

<!-- Default -->
<div class="variant theme-default">
    Some Text<br><br>
    <em>current theme: default</em>
</div>

<style>
    .variant {
        --bg-color: #000;
        --color: #fff;
    }

    .variant.theme-red {
        --bg-color: #DA2315;
        --color: #fff;
    }

    .variant.theme-gray {
        --bg-color: #848484;
        --color: #fff;
    }

    .variant {
        background-color: var(--bg-color);
        color: var(--color);
        padding: 30px;
        line-height: 1.4;
    }
</style>


<!-- Red -->
<div class="variant theme-red">
    Some Text<br><br>
    <em>current theme: red</em>
</div>

<style>
    .variant {
        --bg-color: #000;
        --color: #fff;
    }

    .variant.theme-red {
        --bg-color: #DA2315;
        --color: #fff;
    }

    .variant.theme-gray {
        --bg-color: #848484;
        --color: #fff;
    }

    .variant {
        background-color: var(--bg-color);
        color: var(--color);
        padding: 30px;
        line-height: 1.4;
    }
</style>


<!-- Gray -->
<div class="variant theme-gray">
    Overriding the default text context<br><br>
    <em>current theme: gray</em>
</div>

<style>
    .variant {
        --bg-color: #000;
        --color: #fff;
    }

    .variant.theme-red {
        --bg-color: #DA2315;
        --color: #fff;
    }

    .variant.theme-gray {
        --bg-color: #848484;
        --color: #fff;
    }

    .variant {
        background-color: var(--bg-color);
        color: var(--color);
        padding: 30px;
        line-height: 1.4;
    }
</style>


<!-- 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>
</div>


<!-- Default -->
<div class="variant theme-{{ theme }}">
	{{ text }}<br><br>
	<em>current theme: {{ theme }}</em>
</div>

<style>
	.variant {
		--bg-color: #000;
		--color: #fff;
	}

	.variant.theme-red {
		--bg-color: #DA2315;
		--color: #fff;
	}

	.variant.theme-gray {
		--bg-color: #848484;
		--color: #fff;
	}

	.variant {
		background-color: var(--bg-color);
		color: var(--color);
		padding: 30px;
		line-height: 1.4;
	}
</style>

<!-- Red -->
<div class="variant theme-{{ theme }}">
	{{ text }}<br><br>
	<em>current theme: {{ theme }}</em>
</div>

<style>
	.variant {
		--bg-color: #000;
		--color: #fff;
	}

	.variant.theme-red {
		--bg-color: #DA2315;
		--color: #fff;
	}

	.variant.theme-gray {
		--bg-color: #848484;
		--color: #fff;
	}

	.variant {
		background-color: var(--bg-color);
		color: var(--color);
		padding: 30px;
		line-height: 1.4;
	}
</style>

<!-- Gray -->
<div class="variant theme-{{ theme }}">
	{{ text }}<br><br>
	<em>current theme: {{ theme }}</em>
</div>

<style>
	.variant {
		--bg-color: #000;
		--color: #fff;
	}

	.variant.theme-red {
		--bg-color: #DA2315;
		--color: #fff;
	}

	.variant.theme-gray {
		--bg-color: #848484;
		--color: #fff;
	}

	.variant {
		background-color: var(--bg-color);
		color: var(--color);
		padding: 30px;
		line-height: 1.4;
	}
</style>

<!-- Alt -->
<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>
</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