Cards can be used to show brief information about particular thing. You can use card for different purpose such as product information. Cards takes 100% width of their parent, to give specific widht, wrap the card inside the container and add width to that container.
Hydrogen provides two types of horizontal card. Card with
image in center and card with image at the top of the card.
You need to add img-top class to make the image
appear at the top, by default it is in center.
This laptop packs a punch in terms of performance as it comes with an AMD Ryzen 5500U processor and NVIDIA GeForce GTX 1650 graphics processor.
This laptop packs a punch in terms of performance as it comes with an AMD Ryzen 5500U processor and NVIDIA GeForce GTX 1650 graphics processor.
Add card-vertical class for the vertical card,
everything remains the same.
This laptop packs a punch in terms of performance as it comes with an AMD Ryzen 5500U processor and NVIDIA GeForce GTX 1650 graphics processor.
Card with text overlay can be used to add status information about the product such as out of stock.
This laptop packs a punch in terms of performance as it comes with an AMD Ryzen 5500U processor and NVIDIA GeForce GTX 1650 graphics processor.
Text only card don't contain image. Infomation is conveyed only using text.
This laptop packs a punch in terms of performance as it comes with an AMD Ryzen 5500U processor and NVIDIA GeForce GTX 1650 graphics processor. It Features a 39.62 cm (15.6) Full HD LED Backlit screen, with an 81.61% screen-to-body ratio.
You can use card with dismiss if you want the feature where user is able to dismiss the card.
This laptop packs a punch in terms of performance as it comes with an AMD Ryzen 5500U processor and NVIDIA GeForce GTX 1650 graphics processor.
JavaScript Code