Cork UI
What?
Introduction
Media Card
Text Card
Horizontal Media Card
Text-Over Image
Product Card
Badge Card
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.
Media Card
Example of
Our Changing Planet
By Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today
Read BookmarkText Card
A text card containing a title, content and an extra corner content.Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information.
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.
Our Changing Planet
By Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today
Read BookmarkProduct Card
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.
Red Tape Men's Sweatshirt
Pure Fabric Mustard Yellow
Rs.749 Rs.1099 (20%off)
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.
New launched
Apple iPhone 11 (128GB) - Green
-17% ₹49,900.00
M.R.P.: ₹59,900.00
Inclusive of all taxes
EMI starts at ₹2,349. No Cost EMI available