<div class="c-block c-block--sm u-spacing--xs">
<div class="c-block__content">
<h3 class="o-heading c-block__heading">
<a class="o-heading__link" href="/">
[Column Heading]
</a>
</h3>
<div class="o-dek c-block__primary-text">
[Max 200 Char]Lorem ipsum dolor sit amet consectetur. Vulputate augue maecenas fermentum aliquam mi dolor et. Libero pulvinar diam molestie eu. Molestie eu odio donec imperdiet volutpat sem non odio in pellentesque.
</div>
</div>
<div class="c-block__footer">
<a class="o-link o-link--secondary c-block__link" href="/" target="_self">
<span class="o-link__label">
[Action Text]
</span>
<span class="o-icon transition">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
</svg>
</span>
</a>
</div>
</div>
{% set base_class = block.base_class|default('c-block') %}
{% if block.link %}
<div class="{{ bem(base_class, block.element, block.modifiers, block.extra) }} {{ block.modifiers == 'sm' ? "u-spacing--xs" : "u-spacing" }}" {{ attributes(block.attributes) }}>
{% include "@figure" with {
"figure": {
"link": {
"url": block.link.url,
"target": block.link.target
},
"image": {
"srcset": block.image.srcset,
"src": block.image.src,
"alt": block.image.alt,
},
"extra": bem(base_class, 'image')
}
} %}
<div class="{{ bem(base_class, 'content') }}">
{% include "@heading" with {
"heading": {
"level": "3",
"text": block.heading,
"link": {
"url": block.link.url,
"target": block.link.target
},
"extra": bem(base_class, 'heading')
}
} %}
{% include "@dek" with {
"dek": {
"text": block.primary_text,
"extra": bem(base_class, 'primary-text')
}
} %}
{% include "@dek" with {
"dek": {
"text": block.secondary_text,
"extra": bem(base_class, 'secondary-text')
}
} %}
</div>
<div class="{{ bem(base_class, 'footer') }}">
{% if block.modifiers == 'sm' %}
{% include "@link" with {
"link": {
"modifiers": "secondary",
"url": block.link.url,
"text": block.link.text,
"arrow": "true",
"extra": bem(base_class, 'link')
}
} %}
{% else %}
{% include "@button" with {
"button": {
"modifiers": "secondary",
"url": block.link.url,
"text": block.link.text,
"arrow": "true",
"extra": bem(base_class, 'button')
}
} %}
{% endif %}
</div>
</div>
{% endif %}
{
"block": {
"heading": "[Column Heading]",
"primary_text": "[Max 200 Char]Lorem ipsum dolor sit amet consectetur. Vulputate augue maecenas fermentum aliquam mi dolor et. Libero pulvinar diam molestie eu. Molestie eu odio donec imperdiet volutpat sem non odio in pellentesque.",
"secondary_text": false,
"link": {
"url": "/",
"text": "[Action Text]"
},
"image": false,
"modifiers": "sm"
}
}
.c-block {
&__heading {
@include o-typography-heading--h5('secondary', 'bold');
.c-block--sm & {
@include o-typography-heading--h6();
}
}
&__primary-text {
@include o-typography--p1('primary');
.c-block--sm & {
@include o-typography-body--caption-1('primary');
}
}
&__secondary-text {
@include o-typography--p2();
}
}
No notes defined.