Brand Card

This version of the brand card is meant to be more flexible that the previous.

Content will fill the available width of its container.

Customization

Any child of the .brand-card__content node may be omitted as neccesary.

When using a flipped card style, the .brand-card__media and .brand-card__content nodes should be swapped.

Image Ratios: apply the appropriate media ratio class to the .brand-card__media element

Markup

<!-- Brand Card, root element may be a div if no link is desired -->
<a class="flex__item brand-card" href="#">
    <!-- the following siblings must be swapped if using the flipped style -->
    <img class="brand-card__media media__ratio--wide" loading="lazy" src="/Content/src/img/altitude-clouds-cold-417173.jpg" alt="mountain">
    <div class="brand-card__content">
        <!-- optional -->
        <span class="brand-card__content-category">Content Type</span>
        <!-- optional -->
        <h3 class="brand-card__content-title">Capitalism for Everyone</h3>
        <!-- optional -->
        <p class="brand-card__content-description">
            <!-- optional -->
            <span class="brand-card__content-meta">19 Mar 2022</span>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Aenean commodo ligula eget dolor. Aenean massa.
        </p>
        <!-- optional -->
        <div class="brand-card__ctas">
            <a class="brand-card__cta" href="#">See More</a>
        </div>
    </div>
</a>
                

We’re using cookies, but you can turn them off in Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .