<div class="c-la-content-block c-la-two-column-cta">
<h3 id="two-column-cta-title-1484" class="c-la-two-column-cta__title f-title--h4">Discounts</h3>
<ul class="c-la-two-column-cta__items o-row" aria-labelledby="two-column-cta-title-1484">
<li class="c-la-two-column-cta__item o-col o-col-sm-6">
<a href="#" class="c-la-two-column-cta__item-link">
<h4 class="c-la-two-column-cta__item-title f-title--h6">Access</h4>
<p class="c-la-two-column-cta__item-content f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.</p>
<span class="c-la-two-column-cta__item-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</a>
</li>
<li class="c-la-two-column-cta__item o-col o-col-sm-6">
<a href="#" class="c-la-two-column-cta__item-link">
<h4 class="c-la-two-column-cta__item-title f-title--h6">STAMP</h4>
<p class="c-la-two-column-cta__item-content f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.</p>
<span class="c-la-two-column-cta__item-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</a>
</li>
<li class="c-la-two-column-cta__item o-col o-col-sm-6">
<a href="#" class="c-la-two-column-cta__item-link">
<h4 class="c-la-two-column-cta__item-title f-title--h6">Philadelphia City Pass</h4>
<p class="c-la-two-column-cta__item-content f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.</p>
<span class="c-la-two-column-cta__item-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</a>
</li>
<li class="c-la-two-column-cta__item o-col o-col-sm-6">
<a href="#" class="c-la-two-column-cta__item-link">
<h4 class="c-la-two-column-cta__item-title f-title--h6">The Philadelphia Pass®</h4>
<p class="c-la-two-column-cta__item-content f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.</p>
<span class="c-la-two-column-cta__item-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</a>
</li>
<li class="c-la-two-column-cta__item o-col o-col-sm-6">
<a href="#" class="c-la-two-column-cta__item-link">
<h4 class="c-la-two-column-cta__item-title f-title--h6">Association of Science Technology Centers</h4>
<p class="c-la-two-column-cta__item-content f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.</p>
<span class="c-la-two-column-cta__item-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</a>
</li>
</ul>
</div>
{% set hID = 'two-column-cta-title-' ~ random(5000) %}
<div class="c-la-content-block c-la-two-column-cta">
<h3 id="{{ hID }}" class="c-la-two-column-cta__title f-title--h4">{{ title }}</h3>
<ul class="c-la-two-column-cta__items o-row" aria-labelledby="{{ hID }}">
{% for item in items %}
<li class="c-la-two-column-cta__item o-col o-col-sm-6">
<a href="{{ item.link }}" class="c-la-two-column-cta__item-link">
<h4 class="c-la-two-column-cta__item-title f-title--h6">{{ item.title }}</h4>
<p class="c-la-two-column-cta__item-content f-text--small">{{ item.content }}</p>
<span class="c-la-two-column-cta__item-icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{
"pageColorTheme": "teal",
"title": "Discounts",
"items": [
{
"title": "Access",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.",
"link": "#"
},
{
"title": "STAMP",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.",
"link": "#"
},
{
"title": "Philadelphia City Pass",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.",
"link": "#"
},
{
"title": "The Philadelphia Pass®",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.",
"link": "#"
},
{
"title": "Association of Science Technology Centers",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.",
"link": "#"
}
]
}
.c-la-two-column-cta__title {
margin-bottom: 3.4rem;
}
.c-la-two-column-cta__item {
margin-bottom: 6rem;
&:last-child {
margin-bottom: 0;
}
@include break($sm) {
&:nth-last-child(-n+2) {
margin-bottom: 0;
}
}
}
.c-la-two-column-cta__item-link {
display: block;
@include ctaArrowHover;
}
.c-la-two-column-cta__item-title {
margin-bottom: 1.6rem;
line-height: 1.4;
}
.c-la-two-column-cta__item-icon {
display: block;
margin-top: 2.6rem;
transition: all 0.24s ease-in-out;
}
No notes defined.