Card

Card is a container for text, photos, and actions in the context of a single subject.

Default

This is the default style of the card component.

Text Only Card

This is a text only card

Code


                          <div class="card-container card-sq center clickable">
                          <h3 class="colors-textDark text-only">Text Only Card</h3>
                          <p class="text-only">This is a text only card</p>
                        </div>

Clickable Card

This is the Clickable style of the card component.

Text Only Card

This is a text only card

Code


                          <div class="card-container card-sq center clickable">
                          <h3 class="colors-textDark text-only">Text Only Card</h3>
                          <p class="text-only">This is a text only card</p>
                        </div>

Pricing Card

This is the Pricing style of the card component.

NEW

Starter

$99/mo

1 Wordpress install

Unlimited bandwidth

Superfast SSD

Code


                          <div class="card-container center gap card-long clickable">
                          <h6 class="card-badge colors-warning">NEW</h6>
                          <h4 class="colors-textDark card-text">Starter</h4>
                          <h2 class="colors-textDark card-text">$99/mo</h2>
                          <div class="flex center flex-col">
                            <h5 class="card-text">1 Wordpress install</h5>
                            <h5 class="card-text">Unlimited bandwidth</h5>
                            <h5 class="card-text">Superfast SSD</h5>
                          </div>
                          <button class="button button-primary colors-textLight primary-shadow">
                            Buy Now
                          </button>
                        </div>

Image Card

This is the Pricing style of the card component.

Haily

This is a user profile card

Code


                          <div class="card-container center gap-10 card-long clickable">
                          <img class="card-img" src="../../Assets/avatar-2.png" alt="avatar" />
                          <h3 class="colors-textDark card-text">Haily</h3>
                          <div class="flex center flex-col">
                            <p>This is a user profile card</p>
                          </div>
                        </div>
                      </div>

horizontal card

horizontely aligned card componenets

Pudgy Pengiun

Code


                          <div class="card-container-horizontal flex-row card-rec clickable">
                          <img
                            class="card-img-rec"
                            src="../../Assets/avatar.png"
                            alt="avatar"
                          />
                          <div class="flex flex-col pd-10">
                            <h3 class="colors-textDark card-text">Pudgy Pengiun</h3>
                            <button class="button button-Warning colors-textLight">Buy</button>
                          </div>
                        </div>