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 and responsive. The Semantic UI Card element displays site content using the Semantic UI classes like a playing card. Semantic UI cards have multiple sections such as content, extra content, and description. In this article, we will learn about the content block of the Semantic UI card. The Semantic UI card content block is used to contain the main contents in the card. It is essentially the body of the card. We use the content class to add content to the Card in Semantic UI. There can be multiple <div> with the class content in a single card.
Semantic-UI Card Content Block Class:
- content: This class is used to add blocks of content to the Semantic UI card.
Syntax:
<div class="ui card"> <div class="content"> ... </div> </div>
Example 1: The following example demonstrates the basic card with a content section using Semantic UI.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet" />
</head>
<body style="padding: 20px;">
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<strong>Semantic UI Card Content</strong>
<br>
</center>
<div class="ui card">
<div class="content">
Here content block starts.
<h1 style="color: green">GeeksforGeeks</h1>
<div class="description">
This is a basic card made using Semantic UI.
</div>
Here, content block ends.
</div>
</div>
</body>
</html>
|
Output:
Output
Example 2: The following example demonstrates the basic card with multiple content sections using Semantic UI.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet" />
</head>
<body style="padding: 20px;">
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<strong>Semantic UI Card Content</strong>
<br>
</center>
<div class="ui card">
<div class="content">
First Content block.
</div>
<div class="image">
<img src=
</div>
<div class="content">
Second content block.
</div>
</div>
</body>
</html>
|
Output:
Output
Reference: https://semantic-ui.com/views/card.html#content