Cards
Introduction
Cards are primarily used to convey short information to users.
Mostly seen on E-Commerce websites, cards are used to convery product illustration, alongwith information and also come with multiple action buttons.
The cards provided by Marvel UI are 384 px wide, being the most common size widely used across many platforms. But that can easily be overridden.
card-badge and card-icons are available to use for all the cards and can be positioned on both the top corners with classes top-left and top-right
Icons are imported and used from FontAwesome .
Text-only Card
Text cards simply consist of a title and a description.
Such cards are more widely used for sharing nuggets of information in a small space
card-elevation class can be used on any card to give it a shadow.
Ironman
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem placeat distinctio exercitationem magnam doloribus! Dolorum delectus atque quas explicabo voluptatem soluta aliquam! Facilis officiis necessitatibus totam laudantium similique esse dolor.
Code:
Vertical Card
Vertical cards are the most common type of cards seen used across multiple platforms.
Being vertical means you can fit all the required information without having to fight for space.
Nike Red
ShoesLorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quae itaque eligendi commodi nesciunt aspernatur?
Code:
Horizontal Card
Horizontal cards come to play primarily on mobiles or on websites where you'd like to place the card as discreetly yet still be visible to the user.
These cards can have a brief bio/description.
Nike Red
ShoesLorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quae itaque eligendi commodi nesciunt aspernatur?
Nike Red
ShoesCode:
Card with Text Overlay
You need to wrap element that need to be overlay and on which it is to be overlayed in a single div. Use class names as per below code.
Nike Red
ShoesLorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quae itaque eligendi commodi nesciunt aspernatur?
Code: