Card

Cards contain content and actions about a single subject. Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Basic Card (Vertical)

A basic card may contain product image, product name, company name, description of products, some buttons and icons. You can use card-container for card layout and for components use card-image, card-author, card-content etc. classes as shown below.

Basic Card (Horizontal)

A basic card with badge will contain all the things that basic card have and also one extra thing which is the badge which will be on image. You can use card-container for card layout, card-badge for dismiss button and for components use card-image, card-author, card-content etc. classes as shown below.

Basic Card with buttons only

A basic card w/ only buttons will contain the all the things of basic card except icons. You can use card-container for card layout and for components use card-image, card-author, card-content etc. classes as shown below.

Basic Card w/ icon only

A basic card with only icon will contain all the things that basic card have except buttons. You can use card-container for card layout and for components use card-image, card-author, card-content etc. classes as shown below.

Basic Card w/ text overlay

A basic card with text overlay will contain all the things that basic card have except the heading text which will be on image. You can use card-container for card layout and for components use card-image, card-author, card-content etc. classes as shown below.

Basic Card w/ dismiss

A basic card with dismiss will contain all the things that basic card have and also one extra thing which is the dismiss button which will be on image. You can use card-container for card layout, dismiss for dismiss button and for components use card-image, card-author, card-content etc. classes as shown below.

Basic Card w/ badge

A basic card with badge will contain all the things that basic card have and also one extra thing which is the badge which will be on image. You can use card-container for card layout, card-badge for dismiss button and for components use card-image, card-author, card-content etc. classes as shown below.

Text only Card

A text only card will contain only texts like product name , description etc, it will not contain any images and buttons. You can use card-container for card layout and for components use card-author, card-content etc. classes as shown below.