Card | Easy.css

Example:

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.

Add style="width: 12rem" to the card to decide the card width.

Card Header

Some quick example text to build on the card title and make up the bulk of the card's content.


            <div class="card" style="width: 12rem">

              <div class="card-img">

                <img src="https://picsum.photos/200/200"
            />

              </div>

              <div class="card-header">Card
            Header</div>

              <div class="card-body">

                Some quick example text to build on the card
            title and make up the

                bulk of the card's content.

              </div>

              <div class="card-footer">

                <button class="btn primary">Card
            Button</button>

              </div>

            </div>

Card with only body:

Such a simple card can be created by adding the .card-body . They are mainly used to display only the content of the card.

Some quick example text to build on the card title and make up the bulk of the card's content.


            <div class="card" style="width: 20rem">

              <div class="card-body">

                Some quick example text to build on the card
            title and make up the

                bulk of the card's content.

              </div>

            </div>

Card with header,title,button:

Cards can also be given a header and footer. These are optional, and can be used for things like titles, subtitles, and action links.

Card Header

Some quick example text to build on the card title and make up the bulk of the card's content.


            <div class="card" style="width: 12rem">

              <div class="card-header">Card
            Header</div>

              <div class="card-body">

                Some quick example text to build on the card
            title and make up the

                bulk of the card's content.

              </div>

              <div class="card-footer">

                <button class="btn primary">Button 1
            </button>

                <button class="btn primary">Button 2
            </button>

              </div>

            </div>

Card with image and body:

Cards can also be used by showing only the image and bpdy. This is done by adding the .card-img and .card-body classes.

Some quick example text to build on the card title and make up the bulk of the card's content.


            <div class="card" style="width: 12rem">

              <img class="card-img-top"
            src="https://picsum.photos/200/200" />

              <div class="card-body">

                Some quick example text to build on the card
            title and make up the

                bulk of the card's content.

              </div>

            </div>