<section class="ai-explore-links ai-component">
<div class="ai-container">
<div class="inner">
<div class="copy">
<h2 class="h3 sub-heading">Explore other themes</h2>
<p class="text-grey">Tincidunt magnis sed lacus tortor. Et duis mollis id adipiscing. Platea eros mauris ullamcorper ullamcorper egestas hac. Eu ante duis dignissim bibendum integer ac. Facilisi enim sodales est dui. Blandit est interdum at enim. Massa mattis ullamcorper metus habitant senectus dictum porttitor et.</p>
</div>
<div class="links">
<a class="ai-btn ai-btn-primary small" href="">Education & learning</a>
<a class="ai-btn ai-btn-primary small" href="">Relationships & social interactions</a>
<a class="ai-btn ai-btn-primary small" href="">Transportation & logistics</a>
<a class="ai-btn ai-btn-primary small disabled" href="">Coming soon – Environment</a>
<a class="ai-btn ai-btn-primary small disabled" href="">Coming soon – Medicine & health</a>
<a class="ai-btn ai-btn-primary small disabled" href="">Coming soon – Food & farming</a>
</div>
</div>
</div>
</section>
<section class="ai-explore-links ai-component">
<div class="ai-container">
<div class="inner">
<div class="copy">
<h2 class="h3 sub-heading">{{{heading}}}</h2>
<p class="text-grey">{{{text}}}</p>
</div>
<div class="links">
{{#if links}}
{{#each links}}
<a class="{{class}}" href="">{{text}}</a>
{{/each}}
{{/if}}
</div>
</div>
</div>
</section>
{
"heading": "Explore other themes",
"text": "Tincidunt magnis sed lacus tortor. Et duis mollis id adipiscing. Platea eros mauris ullamcorper ullamcorper egestas hac. Eu ante duis dignissim bibendum integer ac. Facilisi enim sodales est dui. Blandit est interdum at enim. Massa mattis ullamcorper metus habitant senectus dictum porttitor et.",
"links": [
{
"class": "ai-btn ai-btn-primary small",
"text": "Education & learning"
},
{
"class": "ai-btn ai-btn-primary small",
"text": "Relationships & social interactions"
},
{
"class": "ai-btn ai-btn-primary small",
"text": "Transportation & logistics"
},
{
"class": "ai-btn ai-btn-primary small disabled",
"text": "Coming soon – Environment"
},
{
"class": "ai-btn ai-btn-primary small disabled",
"text": "Coming soon – Medicine & health"
},
{
"class": "ai-btn ai-btn-primary small disabled",
"text": "Coming soon – Food & farming"
}
]
}
// explore links
section{
&.ai-explore-links{
background-color: $lightgrey;
padding: 2rem 0 2rem 0;
@media (min-width: $medium) {
padding: 2rem 0 4rem 0;
}
.inner{
@media (min-width: $medium) {
display: flex;
justify-content: end;
}
.copy{
@media (min-width: $medium) {
width: 65%;
padding-right: 8rem;
}
h2{
padding-bottom: 1rem;
}
}
.links{
position: relative;
margin-top: 2rem;
padding-top: 1.5rem;
@media (min-width: $medium) {
margin-top: 4rem;
}
&:after{
content: '';
width: 100%;
height: 1px;
background-color: $grey;
position: absolute;
top: 0;
left: 0;
@media (min-width: $medium) {
width: 50%;
}
}
@media (min-width: $medium) {
width: 30%;
}
}
.ai-btn{
margin-bottom: 0.8rem;
}
}
}
}
No notes defined.