Cards<!-- --> | Broadacre

Cards

Pattern Lineage: eyebrowhyperlinkbuttonspictogramcontent-icons

Demo
H600 EYEBROW
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Hyperlink
Usage
<div class="card card--padded">
    <div class="card-body">
        <h6 class="eyebrow">H600 EYEBROW</h6>
        <div class="h500"><a href="/">Card title</a> </div>
        <div class="body-md">Some quick example text to build on the card title and make up the bulk of the card&#x27;s content.</div><a class="hyperlink right-text  " href="/hyperlink">Hyperlink<svg width="6" height="20" viewBox="0 0 6 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L5.70711 9.29289C6.09763 9.68342 6.09763 10.3166 5.70711 10.7071L1.70711 14.7071C1.31658 15.0976 0.683417 15.0976 0.292893 14.7071C-0.0976311 14.3166 -0.0976311 13.6834 0.292893 13.2929L3.58579 10L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289Z" fill="currentColor"></path>
            </svg></a>
    </div>
</div>
Options