Cards
During design and development phases, this guide is best viewed in Google chrome as it is still a working document.
Guidance card
What data shoud I publish?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="card card--guidance ">
<h2 class="card__heading"><a href="#"><span>What data shoud I publish?</span></a></h2>
<p class="card__excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>Notes
Used to display the guidance and support sections.
Wrap this in a class of .l-cards to display them in a grid.
Guidance card stacked
5 pages
What data shoud I publish?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="card card--guidance card--stacked">
<span class="card__flag">5 pages</span>
<h2 class="card__heading"><a href="#"><span>What data shoud I publish?</span></a></h2>
<p class="card__excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>Notes
Used to display the guidance and support sections that have child pages.
Wrap this in a class of .l-cards to display them in a grid.
Knowledge card
<div class="card card--knowledge card--block">
<h2 class="card__heading"><a href="#"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor.</span></a></h2>
</div>Notes
Used to display the knowledgebases results