Use the documents component to show and link to documents on a page related to the content of that specific page.
Do not use the documents component to show other related information than documents or to show other links than links to documents.
The documents component uses the file download component to show and link to documents. The default standalone link style is used. The file download components are placed in a list.
When there are more than 2 documents to show, only the first 2 documents are shown. The remaining documents are in a second list that is hidden using an accordion component.
<div class="documents accordion">
{% include '@heading' with {
'type': 'h2',
'heading_text': 'Documents'
} %}
<ul class="links">
{% for document in documents %}
<li>
{% block link %}
{% include '@file-download' with {
link: 'javascript:(void);',
text: document.text,
file: {
type: document.type,
size: document.size
}
} %}
{% endblock %}
</li>
{% endfor %}
</ul>
<h3>
<button class="accordion--button"
aria-expanded="false"
aria-controls="documents--content--documents-{{ unique_id }}">
{{ 'There are %s other documents available'|format(other_documents|length) }}
</button>
</h3>
<div class="accordion--content"
id="documents--content--documents-{{ unique_id }}">
<ul class="links">
{% for document in other_documents %}
<li>
{% include '@file-download' with {
link: 'javascript:(void);',
text: document.text,
file: {
type: document.type,
size: document.size
}
} %}
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="documents accordion">
<h2>Documents</h2>
<ul class="links">
<li>
<a href='javascript:(void);' class="standalone-link" download>
In the summertime </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
<li>
<a href='javascript:(void);' class="standalone-link" download>
When the weather is hot </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
</ul>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="documents--content--documents-1">
There are 3 other documents available
</button>
</h3>
<div class="accordion--content" id="documents--content--documents-1">
<ul class="links">
<li>
<a href='javascript:(void);' class="standalone-link" download>
And another one </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
<li>
<a href='javascript:(void);' class="standalone-link" download>
And another one </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
<li>
<a href='javascript:(void);' class="standalone-link" download>
And another one bites the dust </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
</ul>
</div>
</div>
{
"unique_id": "1",
"documents": [
{
"text": "In the summertime",
"type": "PDF",
"size": "102kb"
},
{
"text": "When the weather is hot",
"type": "PDF",
"size": "102kb"
}
],
"other_documents": [
{
"text": "And another one",
"type": "PDF",
"size": "102kb"
},
{
"text": "And another one",
"type": "PDF",
"size": "102kb"
},
{
"text": "And another one bites the dust",
"type": "PDF",
"size": "102kb"
}
]
}
.documents,
.document-box { // Deprecated
li {
@include theme('border-color', 'color-primary--lighten-4', 'more-info-block-border-color');
width: 100%;
margin-top: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid;
@include tablet {
max-width: 36rem;
}
&:last-of-type {
padding-bottom: 0;
border: 0;
}
}
h3 {
@extend %h4;
}
button {
margin-top: 2.3rem;
}
.file-size {
margin-left: .3em;
}
}