Project Lima pattern lib

Components - Cards: Default 

<div class="b-cards row">
    <div class="col col--md-12">
        <div class="b-card">
            <div class="b-card__text-container b-ugc">
                <h3 class="b-card__title">Lorem ipsum dolor sit amet</h3>
                <p class="b-card__text">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet.</p>
                <p
                    class="b-card__text">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>
    <div class="col col--md-12">
        <div class="b-card">
            <div class="b-card__image-container">
                <img src="https://via.placeholder.com/400x200?text=Image+coming+soon" alt="Image coming soon" draggable="false">
            </div>
            <div class="b-card__text-container b-ugc">
                <h3 class="b-card__title">Lorem ipsum dolor sit amet</h3>
                <p class="b-card__text">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet.</p>
                <p
                    class="b-card__text">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>
</div>
 
<div class="b-cards row">
    <div class="col col--md-12">
        <div class="b-card{{ modifier }}">
            <div class="b-card__text-container b-ugc">
                <h3 class="b-card__title">{{ title }}</h3>
                {{{ content }}}
            </div>
        </div>
    </div>
    <div class="col col--md-12">
        <div class="b-card{{ modifier }}">
            <div class="b-card__image-container">
                <img src="https://via.placeholder.com/400x200?text=Image+coming+soon" alt="Image coming soon" draggable="false">
            </div>
            <div class="b-card__text-container b-ugc">
                <h3 class="b-card__title">{{ title }}</h3>
                {{{ content }}}
            </div>
        </div>
    </div>
</div>
 
{
  "modifier": null,
  "title": "Lorem ipsum dolor sit amet",
  "content": "<p class=\"b-card__text\">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet.</p><p class=\"b-card__text\">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet.</p>"
}

To layout cards, it is advisable to use the grid system. With flexbox, this will keep them aligned and equally spaced without much coding.