Super UI
Card
Card are used to show user related data collectively, like product details.
Example of Horizontal Card-Text + Image
Card's image may have a margin or it can be full-bleed. By default card's images are full-bleed. If you want image to have margin, you can use horizontal-card-container class. Copy below code and put your desired text and image and you are good to go
Black Jacket
Men's Cap
Sold by: Prabhat Singh
Lorem ipsum dolor sit, amet consectetur adipisicing elit.amet consectetur adipisicing elit.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="card-container horizontal-card-container d-flex padding-xs"> | |
| <div class="avatar-xl"> | |
| <img | |
| class="img-responsive" | |
| src="/assests/Images/example_image1.jpg" | |
| alt="black_jacket" | |
| /> | |
| </div> | |
| <div class="card-description margin-xs"> | |
| <h1 class="card-title head-lg">Black Jacket</h1> | |
| <h2 class="card-subtitle head-sm">Men's Cap</h2> | |
| <h3 class="head-4 text-gray">Sold by: Prabhat Singh</h3> | |
| <p class="text-4 text-gray"> | |
| Lorem ipsum dolor sit, amet consectetur adipisicing elit.amet | |
| consectetur adipisicing elit. | |
| </p> | |
| <button | |
| type="button" | |
| class="btn btn-primary head-sm border-radius-xs margin-xs"> | |
| <i class="fas fa-shopping-cart cart-icon"></i>Add to cart | |
| </button> | |
| <button | |
| type="button" | |
| class="btn btn-secondary head-sm border-radius-xs margin-xs"> | |
| Move to Wishlist | |
| </button> | |
| </div> | |
| </div> |
Example of Vertical Card-Text + Image
Below are 3 variations, card with badge, card with image vertical-card-container, card with close button. All the cards have like button.
New
Black Cap
Men's Cap
Rs.499
Black Cap
Men's Cap
Rs.499
Out of stock
Black Cap
Men's Cap
Rs.499
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="d-flex"> | |
| <div class="card-container vertical-card-container padding-xs margin-md"> | |
| <div class="avatar-xl position-rel"> | |
| <img | |
| class="img-responsive" | |
| src="/assests/Images/example_image1.jpg" | |
| alt="black_cap" | |
| /> | |
| <span | |
| class="card-badge-primary position-abs top-0 left-0 translate-topright padding-xxs border-radius-xs" | |
| >New</span | |
| > | |
| </div> | |
| <div class="card-description"> | |
| <h1 class="card-title head-md">Black Cap</h1> | |
| <i class="far fa-heart btn-icon badge-link"></i> | |
| <h2 class="card-subtitle head-sm">Men's Cap</h2> | |
| <p class="text-sm text-gray">Rs.499</p> | |
| <button | |
| type="button" | |
| class="btn btn-primary head-sm border-radius-xs" | |
| > | |
| <i class="fas fa-shopping-cart cart-icon"></i>Add to cart | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card-container vertical-card-container padding-xs margin-md"> | |
| <div class="avatar-xl position-rel"> | |
| <img | |
| class="img-responsive" | |
| src="/assests/Images/example_image1.jpg" | |
| alt="black_cap" | |
| /> | |
| <span | |
| class="card-badge-primary badge-link position-abs top-0 right-0 translate-topright" | |
| ><i class="fas fa-times text-3 padding-xs"> | |
| </i></span> | |
| </div> | |
| <div class="card-description"> | |
| <h1 class="card-title head-md">Black Cap</h1> | |
| <i class="far fa-heart btn-icon badge-link"></i> | |
| <h2 class="card-subtitle head-sm">Men's Cap</h2> | |
| <p class="text-sm text-gray">Rs.499</p> | |
| <button | |
| type="button" | |
| class="btn btn-primary head-sm border-radius-xs" | |
| > | |
| <i class="fas fa-shopping-cart cart-icon"></i>Add to cart | |
| </button> | |
| </div> | |
| </div> | |
| <div | |
| class="card-container vertical-card-container opacity-40 padding-xs margin-md" | |
| > | |
| <div class="avatar-xl position-rel"> | |
| <img | |
| class="img-responsive" | |
| src="/assests/Images/example_image1.jpg" | |
| alt="black_cap" | |
| /> | |
| <span | |
| class="card-badge-secondary position-abs top-50 left-0 d-100 text-md" | |
| > | |
| Out of stock | |
| </span> | |
| </div> | |
| <div class="card-description"> | |
| <h1 class="card-title head-md">Black Cap</h1> | |
| <i class="far fa-heart btn-icon badge-link"></i> | |
| <h2 class="card-subtitle head-sm">Men's Cap</h2> | |
| <p class="text-sm text-gray">Rs.499</p> | |
| <button | |
| type="button" | |
| class="btn btn-primary head-sm border-radius-xs" | |
| > | |
| <i class="fas fa-shopping-cart cart-icon"></i>Add to cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> |