The downloads pattern is comprised of several box modules, of which the clickable boxes house a media object.
Downloads are marked with an icon to make them easy to identify and have meta data associated with them.
<div class="container">
<div class="grid">
<div class="cell cell--1 cell--small-1/3">
<a href="#" class="box text-bold">
<div class="media ">
<div class="media__visual">
<svg viewBox="0 0 24 24" class="icon icon--s ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#download"></use>
</svg>
</div>
<div class="media__content">
BXQ1 Rules
</div>
</div>
</a>
</div>
<div class="cell cell--1 cell--small-2/3">
<div class="box box">
Govern the trading on the BXQ1 trading platform.
</div>
</div>
</div>
<div class="grid">
<div class="cell cell--1 cell--small-1/3">
<a href="#" class="box box--minimal text-bold">
<div class="media ">
<div class="media__visual">
<svg viewBox="0 0 24 24" class="icon icon--s ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#download"></use>
</svg>
</div>
<div class="media__content">
BX Worldcaps Trading organisation
</div>
</div>
</a>
</div>
<div class="cell cell--1 cell--small-2/3">
<div class="box box--minimal">
Govern the specifics of trading in the BX Worldcaps segment.
</div>
</div>
</div>
<div class="grid">
<div class="cell cell--1 cell--small-1/3">
<a href="#" class="box box--minimal text-bold">
<div class="media ">
<div class="media__visual">
<svg viewBox="0 0 24 24" class="icon icon--s ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#download"></use>
</svg>
</div>
<div class="media__content">
BX Worldcaps Rules for admission to trade
</div>
</div>
</a>
</div>
<div class="cell cell--1 cell--small-2/3">
<div class="box box--minimal">
Govern the admission to trade, maintenance and cancellation of shares in the BX Worldcaps segment.
</div>
</div>
</div>
<div class="grid">
<div class="cell cell--1 cell--small-1/3">
<a href="#" class="box box--minimal text-bold">
<div class="media ">
<div class="media__visual">
<svg viewBox="0 0 24 24" class="icon icon--s ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#download"></use>
</svg>
</div>
<div class="media__content">
Listing Rules BX
</div>
</div>
</a>
</div>
<div class="cell cell--1 cell--small-2/3">
<div class="box box--minimal">
Govern the listing, maintenance and cancellation of shares at BX.
</div>
</div>
</div>
<div class="grid">
<div class="cell cell--1 cell--small-1/3">
<a href="#" class="box box--minimal text-bold">
<div class="media ">
<div class="media__visual">
<svg viewBox="0 0 24 24" class="icon icon--s ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#download"></use>
</svg>
</div>
<div class="media__content">
Segment Swissfunds
</div>
</div>
</a>
</div>
<div class="cell cell--1 cell--small-2/3">
<div class="box box--minimal">
Annex: ETF-Spreads
</div>
</div>
</div>
<div class="grid">
<div class="cell cell--1 cell--small-1/3">
<a href="#" class="box box--minimal text-bold">
<div class="media ">
<div class="media__visual">
<svg viewBox="0 0 24 24" class="icon icon--s ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#download"></use>
</svg>
</div>
<div class="media__content">
BX Schedule of Fees
</div>
</div>
</a>
</div>
<div class="cell cell--1 cell--small-2/3">
<div class="box box--minimal">
The BX Swiss AG (BX) Schedule of Fees rules the fees to be paid by issuers and participants according to BX rules
</div>
</div>
</div>
</div>
<div class="container">
{{#each downloads}}
<div class="grid">
<div class="cell cell--1 cell--small-1/3">
<a href="#" class="box {{#unless @first}}box--minimal{{/unless}} text-bold">
{{> @media text=title icon="download"}}
</a>
</div>
<div class="cell cell--1 cell--small-2/3">
{{#if @first}}
{{> @box modifier="box" label=description}}
{{else}}
{{> @box modifier="box--minimal" label=description}}
{{/if}}
</div>
</div>
{{/each}}
</div>
{
"downloads": [
{
"title": "BXQ1 Rules",
"description": "Govern the trading on the BXQ1 trading platform."
},
{
"title": "BX Worldcaps Trading organisation",
"description": "Govern the specifics of trading in the BX Worldcaps segment."
},
{
"title": "BX Worldcaps Rules for admission to trade",
"description": "Govern the admission to trade, maintenance and cancellation of shares in the BX Worldcaps segment."
},
{
"title": "Listing Rules BX",
"description": "Govern the listing, maintenance and cancellation of shares at BX."
},
{
"title": "Segment Swissfunds",
"description": "Annex: ETF-Spreads"
},
{
"title": "BX Schedule of Fees",
"description": "The BX Swiss AG (BX) Schedule of Fees rules the fees to be paid by issuers and participants according to BX rules"
}
]
}