<section class="two-column-row" aria-labelledby="twoColumnRowHeading">
<div class="two-column-row__content container">
<h2 class="two-column-row__heading" id="twoColumnRowHeading">Other Brands You’ll Enjoy</h2>
<p class="two-column-row__intro-text">But wait there’s more!</p>
</div>
<div class="two-column-row__grid">
<div class="two-column-row__card">
<article class="article-card">
<a class="article-card__link" href="#">
<h3 class="article-card__title" style="overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3;">
Card Title 1
</h3>
<p class="article-card__date">
Month DD, YYYY
</p>
<p class="article-card__description">
Lorem ipsum dolor sit amet
</p>
</a>
</article>
</div>
<div class="two-column-row__card">
<article class="article-card">
<a class="article-card__link" href="#">
<h3 class="article-card__title" style="overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3;">
Card Title 1
</h3>
<p class="article-card__date">
Month DD, YYYY
</p>
<p class="article-card__description">
Lorem ipsum dolor sit amet
</p>
</a>
</article>
</div>
</div>
</section>
<section class="two-column-row" aria-labelledby="twoColumnRowHeading">
<div class="two-column-row__content container">
<h2 class="two-column-row__heading" id="twoColumnRowHeading">{{heading}}</h2>
{{#if introText}}
<p class="two-column-row__intro-text">{{introText}}</p>
{{/if}}
</div>
<div class="two-column-row__grid">
<div class="two-column-row__card">
{{#if contentCard}}
{{>@content-card
image= "https://images.pexels.com/photos/3183198/pexels-photo-3183198.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
heading= "Default"
copy= "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum."
ctaLabel= "Action"
cta= "#"
icon= "chevron-right"
}}
{{/if}}
{{#if linkListCard}}
{{>@c-crd-2-link-list-card links='[{
"label": "Explore experimental learning",
"icon": "chevron-right",
"iconPosition": "right",
"size": "small"
}]'
}}
{{/if}}
{{#if relatedContentCard}}
<article class="article-card">
<a class="article-card__link" href="#">
<h3 class="article-card__title" style="overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3;">
Card Title 1
</h3>
<p class="article-card__date">
Month DD, YYYY
</p>
<p class="article-card__description">
Lorem ipsum dolor sit amet
</p>
</a>
</article>
{{/if}}
</div>
<div class="two-column-row__card">
{{#if contentCard}}
{{>@content-card
image= "https://images.pexels.com/photos/3183198/pexels-photo-3183198.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
heading= "Default"
copy= "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum."
ctaLabel= "Action"
cta= "#"
icon= "chevron-right"
}}
{{/if}}
{{#if linkListCard}}
{{>@c-crd-2-link-list-card links='[{
"label": "Explore experimental learning",
"icon": "chevron-right",
"iconPosition": "right",
"size": "small"
}]'
}}
{{/if}}
{{#if relatedContentCard}}
<article class="article-card">
<a class="article-card__link" href="#">
<h3 class="article-card__title" style="overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3;">
Card Title 1
</h3>
<p class="article-card__date">
Month DD, YYYY
</p>
<p class="article-card__description">
Lorem ipsum dolor sit amet
</p>
</a>
</article>
{{/if}}
</div>
</div>
</section>
{
"name": "Default",
"heading": "Other Brands You’ll Enjoy",
"introText": "But wait there’s more!",
"contentCard": false,
"relatedContentCard": true
}
@import '../theme', 'variables';
.two-column-row {
margin-top: 100px;
}
.two-column-row__content {
margin-bottom: 40px;
display: flex;
flex-direction: column;
}
.two-column-row__intro-text {
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 2px;
line-height: 1.43;
margin: 0 0 0.5rem;
margin-bottom: 0.625rem;
text-transform: uppercase;
order: -1;
}
.two-column-row__heading {
color: $title-color;
font-size: 3rem;
line-height: 1.13;
}
.two-column-row__grid {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
@include mq(tablet) {
grid-template-columns: 1fr 1fr;
gap: 3px;
}
}
.two-column-row__card {
> div,
article {
@include mq(tablet) {
width: 100%;
}
}
}
// Colors
$title-color: map-get($theme-colors, "primary") !default;
Headline and lead in text. Headline appears to the left on desktop and above the lead in on mobile and tablet.
Add the front-end-copmonent library to your project
yarn add @verndale/front-end-componentsImport the style to your main style file in your project
@import "../../node_modules/@verndale/front-end-components/lib/page-intro/styles";The component will already have a default style/theme set, so it will work out of the box. It is recommended to use the overrides if you can as it will be less code in your project.
Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss
$page-intro-headline-color;
You always need to set your overrides before the import of you component - for example:
@import "../../node_modules/@verndale/front-end-components/lib/page-intro/styles";