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 make your website look more amazing. In this article, we are going to learn about card description content.
It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.
A card displays website content in a manner similar to a playing card, and it can contain a description with one or more paragraphs.
Semantic UI Card Description Content Class:
- description: This class is used to set descriptions with one or more paragraphs.
Syntax:
<div class="ui card"> <div class="content"> .. <div class="description"> <p>....</p> </div> </div> </div>
Example 1: The below example illustrates the Semantic UI card description content.
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" />
</ head >
< body >
< center >
< h1 class = "ui header green" >GeeksforGeeks</ h1 >
< strong >Semantic UI Card Description Content</ strong >
< div class = "ui card" >
< div class = "content" >
< div class = "header" >
competitive programming
</ div >
< div class = "meta" >2 days ago</ div >
< div class = "description" >
< p >
Whether you are looking to be a
programmer for a top company or
wishing to top the charts of
leading coding competitions,
you have come to the right place!
</ p >
< p >
This live course will help you
enhance your problem-solving
skills, one code at a time.
</ p >
</ div >
</ div >
</ div >
</ center >
</ body >
</ html >
|
Output:
Example 2: The below example illustrates the Semantic UI card description content of 2 cards.
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" />
< style >
body {
margin-left: 10px;
margin-right: 10px;
}
</ style >
</ head >
< body >
< h1 class = "ui header green" >GeeksforGeeks</ h1 >
< strong >Semantic UI Card Description Content</ strong >
< br />< br />
< div class = "ui cards" >
< div class = "ui card" >
< div class = "content" >
< div class = "header" >
competitive programming
</ div >
< div class = "meta" >2 days ago</ div >
< div class = "description" >
< p >
Whether you are looking to be a
programmer for a top company or
wishing to top the charts of
leading coding competitions, you
have come to the right place!
</ p >
< p >
This live course will help you
enhance your problem-solving
skills, one code at a time.
</ p >
</ div >
</ div >
</ div >
< div class = "ui card" >
< div class = "content" >
< div class = "header" >DSA course</ div >
< div class = "meta" >3 days ago</ div >
< div class = "description" >
< p >
A LIVE classroom program designed
for SDEs looking to switch to top
product-based companies. Mentored
by industry experts and complimentary
DSA course content made by the CEO,
practice questions, doubt assistance,
contests & more!
</ p >
< p >
This live course will help you
enhance your problem-solving
skills, one code at a time.
</ p >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/views/card.html#description