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>