Major cards are a flexible content container. They include a title, contextual copy, and an can include metadata, like an item count. There’s no set restriction on how many major cards should be used in a layout, but more items may require more advanced filtering functionality, since visual scanning becomes more difficult when more items are present. Ex: Reports about the FEC
<div class="container" style="padding: 2rem">
<div class="grid grid--3-wide">
<a class="grid__item card--major" href="#">
<div class="card--major__title">
<h2>Strategy, budget and performance</h2>
</div>
<p>This archive provides documents about the agency’s overarching strategy, activities and funding.</p>
<span class="t-sans card__count">38 results</span>
</a>
<a class="grid__item card--major" href="#">
<div class="card--major__title">
<h2>Freedom of Information Act (FOIA) reports</h2>
</div>
<p>Annual FOIA reports include information and statistics about the requests for records that the FEC receives from the public.</p>
<span class="t-sans card__count">34 results</span>
</a>
<a class="grid__item card--major" href="#">
<div class="card--major__title">
<h2>Privacy information</h2>
</div>
<p>The FEC takes privacy seriously. Access privacy notices and read privacy policy.</p>
<span class="t-sans card__count">4 results</span>
</a>
</div>
</div>
<div class="container" style="padding: 2rem">
<div class="grid grid--3-wide">
<a class="grid__item card--major" href="#">
<div class="card--major__title">
<h2>Strategy, budget and performance</h2>
</div>
<p>This archive provides documents about the agency’s overarching strategy, activities and funding.</p>
<span class="t-sans card__count">38 results</span>
</a>
<a class="grid__item card--major" href="#">
<div class="card--major__title">
<h2>Freedom of Information Act (FOIA) reports</h2>
</div>
<p>Annual FOIA reports include information and statistics about the requests for records that the FEC receives from the public.</p>
<span class="t-sans card__count">34 results</span>
</a>
<a class="grid__item card--major" href="#">
<div class="card--major__title">
<h2>Privacy information</h2>
</div>
<p>The FEC takes privacy seriously. Access privacy notices and read privacy policy.</p>
<span class="t-sans card__count">4 results</span>
</a>
</div>
</div>
/* No context defined. */