<div class="c-download-summary" data-bkg-theme="">
<div class="o-container c-download-summary__content">
<h2 class="u-sr-only" id="resource-list1639">List of PDFs</h2>
<ul class="o-row c-download-summary__list" aria-labelledby="resource-list1639">
<li class="c-download-summary__item o-col o-col-sm-6">
<a href="#" class="c-download-summary__item-link">
<h3 class="c-download-summary__list-title f-text--small f-bold">
<span class="u-hover-drawline">Asset Title</span>
</h3>
<p class="f-text--xsmall c-download-summary__list-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem ipsam placeat et dignissimos quas.</p>
<span class="f-upper f-text--tag c-download-summary__list-download">
download pdf
<span class="c-download-summary__list-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M8 0L8 15" />
<path class="u-ct-stroke" d="M15 8L8 15L1 8" />
</svg>
</span>
</span>
</a>
</li>
<li class="c-download-summary__item o-col o-col-sm-6">
<a href="#" class="c-download-summary__item-link">
<h3 class="c-download-summary__list-title f-text--small f-bold">
<span class="u-hover-drawline">Asset Title</span>
</h3>
<p class="f-text--xsmall c-download-summary__list-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem ipsam placeat et dignissimos quas.</p>
<span class="f-upper f-text--tag c-download-summary__list-download">
download pdf
<span class="c-download-summary__list-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M8 0L8 15" />
<path class="u-ct-stroke" d="M15 8L8 15L1 8" />
</svg>
</span>
</span>
</a>
</li>
<li class="c-download-summary__item o-col o-col-sm-6">
<a href="#" class="c-download-summary__item-link">
<h3 class="c-download-summary__list-title f-text--small f-bold">
<span class="u-hover-drawline">Asset Title</span>
</h3>
<p class="f-text--xsmall c-download-summary__list-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem ipsam placeat et dignissimos quas.</p>
<span class="f-upper f-text--tag c-download-summary__list-download">
download pdf
<span class="c-download-summary__list-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M8 0L8 15" />
<path class="u-ct-stroke" d="M15 8L8 15L1 8" />
</svg>
</span>
</span>
</a>
</li>
<li class="c-download-summary__item o-col o-col-sm-6">
<a href="#" class="c-download-summary__item-link">
<h3 class="c-download-summary__list-title f-text--small f-bold">
<span class="u-hover-drawline">Asset Title</span>
</h3>
<p class="f-text--xsmall c-download-summary__list-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem ipsam placeat et dignissimos quas.</p>
<span class="f-upper f-text--tag c-download-summary__list-download">
download pdf
<span class="c-download-summary__list-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M8 0L8 15" />
<path class="u-ct-stroke" d="M15 8L8 15L1 8" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'resource-list' ~ random(5000) %}
{% set hClass = hiddenTitle ? 'u-sr-only' : 'c-download-summary__title f-title--h3' %}
<div class="c-download-summary" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container c-download-summary__content">
<h2 class="{{ hClass }}" id="{{hID}}">{{title}}</h2>
<ul class="o-row c-download-summary__list" aria-labelledby="{{hID}}">
{% for item in items %}
<li class="c-download-summary__item o-col o-col-sm-6">
<a href="{{item.downloadLink}}" class="c-download-summary__item-link">
<h3 class="c-download-summary__list-title f-text--small f-bold">
<span class="u-hover-drawline">{{item.title}}</span>
</h3>
<p class="f-text--xsmall c-download-summary__list-desc">{{item.description}}</p>
<span class="f-upper f-text--tag c-download-summary__list-download">
{{item.downloadTitle}}
<span class="c-download-summary__list-icon" aria-hidden="true">{% include "03/cta-arrow-down" %}</span>
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "List of PDFs",
"items": [
{
"title": "Asset Title",
"description": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem ipsam placeat et dignissimos quas.",
"downloadTitle": "download pdf",
"downloadLink": "#"
},
{
"title": "Asset Title",
"description": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem ipsam placeat et dignissimos quas.",
"downloadTitle": "download pdf",
"downloadLink": "#"
},
{
"title": "Asset Title",
"description": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem ipsam placeat et dignissimos quas.",
"downloadTitle": "download pdf",
"downloadLink": "#"
},
{
"title": "Asset Title",
"description": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem ipsam placeat et dignissimos quas.",
"downloadTitle": "download pdf",
"downloadLink": "#"
}
],
"hiddenTitle": true
}
.c-download-summary {
margin: 6.4rem 0;
@include break($sm) {
margin: 20rem 0;
}
&[data-bkg-theme="light"] {
margin: 0;
padding: 6.4rem 0;
@include break($sm) {
margin: 0;
padding: 12rem 0;
}
}
}
.c-download-summary__title {
margin-bottom: 4.8rem;
}
.c-download-summary__item {
width: 100%;
margin: 2rem 0;
}
.c-download-summary__item-link {
display: block;
border-top: 0.1rem solid var(--ct-txt);
}
.c-download-summary__list-title {
margin: 1.5rem 0 0.5rem;
}
.c-download-summary__list-desc {
margin: 0 0 1.6rem 0;
width: 80%;
}
.c-download-summary__list-download {
display: flex;
align-items: center;
span {
transition: all 0.24s ease-in-out;
padding-left: 0.8rem;
}
&:hover {
span {
transform: translate3d(0, 0.4rem, 0);
}
}
}
This module contains an option for a visually hidden title. To maintain proper heading hierarchy and give screen readers a better experience, the title should be required in the CMS. If the title should be visually hidden, the u-sr-only class is applied to the h2 instead of the typical header classes.