Winning doesn’t always mean being first.
Winning means you’re doing
better than you’ve done before.
Code
<div class="quote__wrapper">
<div class="wrapper--2 ta--2">
<blockquote class="quote">
<p>
Winning doesn’t always mean being first. Winning means you’re doing better than you’ve<br>
done before.
</p>
</blockquote>
</div>
</div>
{{ attach_library('fitch_master/quote') }}
{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
]
%}
{% block paragraph %}
<div class="quote__wrapper">
<div class="wrapper--2 ta--2">
<blockquote class="quote">
{{ content.field_text }}
</blockquote>
</div>
</div>
{% endblock paragraph %}
.section__quote {
.column__wrapper:first-of-type:not(:last-of-type) {
margin-bottom: var(--spacing-3);
}
}
.quote {
position: relative;
font-size: 3.6rem;
font-weight: 300;
&:before {
content: '\201C';
position: relative;
height: 4.8rem;
font-family: "Arial Black", arial;
font-size: 7.2rem;
font-weight: bold;
line-height: 1;
color: #ffe875;
overflow: hidden;
display: block;
}
}
Fields
| Label | Machine name | Field type | Character Limit | Required |
|---|---|---|---|---|
| Text | field_text | Text (formatted, long) | TBC | Yes |
Use Case
This can be used within tabs or carousels as a way to group the quotes together.
The quote can access HTML from the WYSIWYG editor.
Component Options
There are no options for this component.
