Cards

Card with image on top

Card Without Border

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

Card With Border

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

Colored Background

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

Card with header and footer

Card Without Border

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

Card With Border

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

Card With Border

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

Card with background image

Card With Background Image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

Card with aside image

Card Without Border

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. 

        <div class="flex">
            <div class="w-75pc br-8 border m-3 flex items-stretch">
                <div class="w-33pc bg-cover br-l-8"
                    style="background-image:url(https://images.unsplash.com/photo-1562184552-87313093d82d?auto=format&fit=crop&w=800&q=60);">
                </div>
                <div class="w-66pc p-5">
                    <h2 class="gray-darkest fs-m2 fw-600">Card Without Border</h2>
                    <p class="my-3 lh-3 gray-darker opacity-60">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Voluptatibus quia, nulla! Maiores et perferendis eaque,
                        exercitationem praesentium nihil.
                    </p>
                    <button
                        class="inline-block mr-3 mt-5 br-3 bw-0 px-3 py-2 fs-s2 bg-gray-lighter pointer hover-bg-gray-light">
                        Read More
                    </button>
                </div>
            </div>
        </div>