Component Listing

CARDS

Cards groups and displays information related to a product, category or service using components like text, images, badges, etc to grab the user's attention.
Oxygen provides a range of cards namely:

Card with Badges | Product Card with Badge | Cards with Dismiss | Cards with Text Overlay
            | Text only Card | Horizontal Card

To use these cards in your project import the below stylesheet.


@import url("https://oxygen-ui-component-library.netlify.app/components/card/card.css")

Cards with badges

This is a basic vertical card with an image, heading, content and badges.

Mountain

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

#Photography #Travel #Nature


<div class="card-container box-shadow flex-column mb-2">
  <div class="card-image-container mb-2">
    <img class="card-image" src="https://picsum.photos/320/200" alt="image" />
  </div>
  <div class="card-heading mb-2 ml-2">Mountain</div>
  <div class="card-content mb-2 p-2">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s.
  </div>
  <div class="card-badges flex-row justify-content-even">
    <span class="card-badge mb-2">#Photography</span>
    <span class="card-badge mb-2">#Travel</span>
    <span class="card-badge mb-2">#Nature</span>
  </div>
</div>

Cards with product

This is a vertical card with an image, heading, price details, rating, buttons and a badge.

Versace Pour Homme Eau De Toilette

MRP:

~~₹4600~~

₹4140

( 4.6 )

10% OFF


<div class="card-container box-shadow flex-column mb-2">
  <div class="card-image-container">
    <img class="card-image" src="https://pulse-fragrances.netlify.app/images/perfume.jpg" alt="image" />
  </div>
  <div class="card-content-container flex-column">
    <div class="card-heading black-text mb-2">Versace Pour Homme Eau De Toilette</div>
    <div class="card-price flex-row">
      <div class="price-currency mr-1">MRP: </div>
      <div class="price-value mr-1"><strike>₹4600</strike></div>
      <div class="price-dis-value">₹4140</div>
    </div>
    <div class="card-rating flex-row">
      <div class="card-rating-value">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
      </div>
      <div class="card-rating-desc ml-2"> ( 4.6 ) </div>
    </div>
    <div class="card-button flex-row container">
      <button class="card-button card-wishlist align-self-center"><i class="far fa-heart mr-1"></i></button>
      <button class="card-button card-cart align-self-center">Add To Cart</button>
    </div>
  </div>
  <div class="card-badge-top">10% OFF</div>
</div>

Cards with Dismiss

This is a vertical card with an image, heading, sub-heading, content, buttons and a close icon.

Changing Planet

By Kurt Wagnar

Visit 10 places on our planet that are undergoing the biggest changes today.


<div class="card-container box-shadow flex-column mb-2">
  <div class="card-image-container mb-2">
    <img class="card-image" src="https://picsum.photos/320/200" alt="image" />
    <i class="close-icon fas fa-times"></i>
  </div>
  <div class="card-content-container mb-2 m-2 ml-2">
    <div class="card-heading mb-1"><strong>Changing Planet</strong></div>
    <div class="sub-heading mb-2">By Kurt Wagnar</div>
    <div class="card-content">
      Visit 10 places on our planet that are undergoing the biggest changes
      today.
    </div>
  </div>
  <div class="footer flex-row">
    <button class="card-button">READ</button>
    <button class="card-button">BOOKMARK</button>
    <button class="card-button img-btn">
      <i class="far fa-heart"></i>
    </button>
    <button class="card-button img-btn">
      <i class="fas fa-share-alt"></i>
    </button>
    <button class="card-button img-btn">
      <i class="fas fa-ellipsis-v"></i>
    </button>
  </div>
</div>

Cards with Text Overlay

This card contains an overlay text that is used to display an important information to the user.

OUT OF STOCK

Our Changing Planet

By Kurt Wagnar

Visit 10 places on our planet that are undergoing the biggest changes today.


<div class="card-container box-shadow flex-column mb-2">
  <div class="card-image-container mb-2 text-overlay">
    <img class="card-image" src="https://picsum.photos/320/200" alt="image" />
  </div>
  <div class="overlay-text">OUT OF STOCK</div>
  <div class="card-content-container p-2 text-overlay">
    <div class="heading-container mb-2">
      <div class="card-heading">Our Changing Planet</div>
      <div class="sub-heading">By Kurt Wagnar</div>
    </div>
    <div class="card-content mb-2">
      Visit 10 places on our planet that are undergoing the biggest changes
      today.
    </div>
  </div>
  <div class="footer flex-row text-overlay">
    <button class="card-button">READ</button>
    <button class="card-button">BOOKMARK</button>
    <button class="card-button img-btn">
      <i class="far fa-heart"></i>
    </button>
    <button class="card-button img-btn">
      <i class="fas fa-share-alt"></i>
    </button>
    <button class="card-button img-btn">
      <i class="fas fa-ellipsis-v"></i>
    </button>
  </div>
</div>

Text only Cards

This is a vertical card with only heading and text.

Mountain

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.


<div class="card-container box-shadow flex-column mb-2">
  <div class="card-heading-container mb-2 mt-2">
    <div class="card-heading p-2">Mountain</div>
  </div>
  <div class="card-content mb-2 p-2">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s.
  </div>
</div>

Horizontal Card

This card contains an image, product details and a couple of buttons.

Versace Pour Homme Eau De Toilette(100ml)

4.3 / 5

Quantity: 1

MOVE TO WISHLIST


<div class="card-container box-shadow horizontal-card">
  <div class="card-header flex-row mb-2 mt-2">
      <div class="card-image-container p-1">
          <img class="card-image image-no-border" src="https://pulse-fragrances.netlify.app/images/perfume.jpg" alt="image">
      </div>
      <div class="card-content-container p-2 flex-column justify-content-between">
          <div class="card-heading-container">
              <div class="card-heading">Versace Pour Homme Eau De Toilette(100ml)
              </div>
              <div class="card-content justify-content-between">
                  <div class="card-rating flex-row gap">
                      <div class="card-rating-value">
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star-half-alt"></i>
                      </div>
                      <div class="card-rating-number">4.3 / 5</div>
                  </div>    
              </div>
          </div>                                  
          <div class="card-footer flex-row justify-content-between container">
              <div class="card-qty flex-row">
                  <div class="card-qty-content align-self-center">Quantity: 1</div>
                  <div class="card-qty-icon align-self-center"><i class="fas fa-angle-down"></i></div>
              </div>
              <div class="card-button card-wishlish secondary-button">MOVE TO WISHLIST</div>
          </div>
      </div>    
  </div>
</div>