Note: The planet UI design system is an extension of the bootstrap framework. Please also referer to the bootstrap documentation for best pratices while using the framework.

Cards

Overview

In the design system cards are mostly used for page layouts. List pages will generally have one card containing the full page where details pages consist of multiple rows or columns of cards that should expand to full width when displayed on a mobile device.

Multiple responsive columns

Card 1

Card content...

Card 2

Card content...

Card 3

Card content...

<div class="row">
    <div class="col-12 col-md-4 mb-2">
        <div class="card w-100">
            <div class="card-body">
                <h4 class="card-title text-dark">Card 1</h4>
                <div class="row">
                    <div class="col-12">
                        <p>Card content...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4 mb-2">
        <div class="card w-100">
            <div class="card-body">
                <h4 class="card-title text-dark">Card 2</h4>
                <div class="row">
                    <div class="col-12">
                        <p>Card content...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4 mb-2">
        <div class="card w-100">
            <div class="card-body">
                <h4 class="card-title text-dark">Card 3</h4>
                <div class="row">
                    <div class="col-12">
                        <p>Card content...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>