Comparison Card<!-- --> | Broadacre

Comparison Card

Pattern Lineage: cardseyebrowhyperlinkpictogramunordered-list

Demo
Alt text here
H600 EYEBROW
Card title
Optional Subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Subheadline
  • Text content, lorem ipsum
  • Text content, lorem ipsum
  • Text content, lorem ipsum
  • Text content, lorem ipsum
  • Text content, lorem ipsum
  • Text content, lorem ipsum
  • Text content, lorem ipsum
Hyperlink
Highlight
Usage
<div class="card card--padded card--pictogram card--comparison card--highlight card--pictogram">
    <div class="card-image card--pictogram image-left"><a href="/" class="flex-shrink-0" aria-label="Alt text here"><img src="/images/hotdog.png" alt="Alt text here" class="image--pictogram" /></a></div>
    <div class="card-body">
        <h6 class="eyebrow">H600 EYEBROW</h6>
        <div class="h400"><a href="/">Card title</a>
            <div class="subtitle body-md">Optional Subtitle</div>
        </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>
        <div class="details body-md">
            <h5>Subheadline</h5>
            <ul class="checked">
                <li><i class="icon-check"></i>Text content, lorem ipsum</li>
                <li><i class="icon-check"></i>Text content, lorem ipsum</li>
                <li><i class="icon-check"></i>Text content, lorem ipsum</li>
                <li><i class="icon-check"></i>Text content, lorem ipsum</li>
                <li><i class="icon-check"></i>Text content, lorem ipsum</li>
                <li><i class="icon-check"></i>Text content, lorem ipsum</li>
                <li><i class="icon-check"></i>Text content, lorem ipsum</li>
            </ul>
        </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 class="highlight-label">Highlight</div>
</div>
Options