CARD

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.

Text-Card

A text card containing a title, content and an extra corner content

Media-card

Example of a card using an image to reinforce the content.Often a card allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior.

Horizontal-media-card

we horizontaly seperated the image and content of the card

Text-over-image

CSS position property is used to set the position of text over an image.The absolute elements are positioned relative to their parent.

Product-card(shadow)

Product card has image, product tiitle, tag, small decription about product. it allows users to interact with buttons to add into cart or add into wishlist.

Badge-card

We can set a badge over the image of the product, CSS position property is used to set the position of badge over an image.