Semantic-UI Card Variations Fluid Card Variant
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI offers several card variations like fluid card, centered card, raised card, link card, floated content, text alignment, colored, column count, stackable, doubling. In this article, we will learn about card fluid variation.
Semantic UI Card Variations Fluid Card Variant takes the size or width of the container with which it is enclosed as it’s free to flow.
Semantic-UI Card Variations Fluid Card Variant Class:
- fluid: This class is used to force the card element to take the entire width of the container.
Note: You can arrange all these fluid variation cards in the form of grids
<div class="ui fluid card"> <div class="..."> <!-- image --> </div> <div class="..."> <!-- description --> </div> </div>
Below example illustrates the Semantic-UI Card Variations Fluid Card Variant
Example: The following example demonstrates the card fluid class. We can observe the image as completely taking the shape of the container since we used card fluid variation.
Please Login to comment...