Blockquote
The following options should be available on blockquotes, with each adding the appropriate modifier classes to the container:
- Color scheme. This applies to the containing page; all blockquotes on a page must use the same
color scheme. Options:
- Black text on off-white (default; no classes added)
- White text on blue
.blockquote--color-white-on-blue
- Black text on green
.blockquote--color-black-on-green
- Blue text on white
.blockquote--color-blue-on-white
- Blue text on white with top bar
.blockquote--color-blue-on-white-with-bar
- Typeface. This also applies to the page; all blockquotes on a page must use the same font-family.
Options:
- Sans-serif (default; no classes added)
- Serif
.blockquote--font-serif
- Font size. This can be different for each blockquote. Options:
- Normal (default; no classes added)
- Smaller
.blockquote--font-size-small
There should also be a boolean checkbox, checked by default, to Show Twitter link. This works
through a template variable rather than through a normal modifier class. All the examples below
have this option set to true
.
.blockquote--color-white-on-blue
White text on blue background
.blockquote--color-black-on-green
White text on green background
.blockquote--color-blue-on-white
Blue text on white background
.blockquote--color-blue-on-white-with-bar
Blue text on white background with thick top border
.blockquote--font-serif
Serif font
.blockquote--font-size-small
Smaller font size
{{ attach_library('h4h_theme/blockquote') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<section class="blockquote {{ modifier_class }}{{ show_twitter is not empty ? ' blockquote--show-twitter' }}">
<blockquote>{{ quote }}
</blockquote>
{% if credit %}
<cite>— {{ credit }}
</cite>
{% endif %}
{% if show_twitter is not empty %}
<a class="blockquote__twitter" target="_blank" href="https://twitter.com/intent/tweet?text={{ quote|trim|escape('url') }}&url={{ url is not empty ? url|escape('url') : 'https://www.habitat.org/'|escape('url') }}&via=Habitat_org">
{{ icons.get('twitter', 'icon icon--twitter', true) }}
</a>
{% endif %}
</section>