Semantic-UI Step Content
Last Updated :
22 Apr, 2022
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.
Content is an element in our website which displays informative data to the user. It is essential to have content on our website in order to make things look easy and make them better. This content can be an image, textual data, etc.
Semantic UI Step Content: There are three types of content in the Semantic UI.
- Description: This displays a description of our steps using the description class.
- Icon: This displays an icon related to our step using <i> tag with the icon class.
- Link: This enables the step to become a link using <a> tag.
Syntax:
<div class="ui steps">
<a class="step">
<i class="... icon"></i>
<div class="description">....</div>
</a>
....
</div>
Example 1: In the following program, we will be using the description content.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic-UI Step Content</title>
<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 rel="stylesheet"
href=
<script src=
</script>
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<br>
<div class="ui green huge header">
GeeksforGeeks
</div>
<div class="ui large header">
Semantic-UI Step Groups
</div>
<div class="ui steps">
<div class="step">
<div class="title">
John Cena
</div>
<div class="description">
Professional Wrestler
</div>
</div>
<div class="step">
<div class="title">
Vivian Richards
</div>
<div class="description">
Legendary Cricketer
</div>
</div>
</div >
</body>
</html>
|
Output:
Semantic-UI Step Content
Example 2: In the following program, we will be using the icon content.
HTML
<!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 rel="stylesheet"
href=
<script src=
</script>
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<br>
<div class="ui green huge header">
GeeksforGeeks
</div>
<div class="ui large header">
Semantic-UI Step Groups
</div>
<div class="ui steps">
<div class="step">
<i class="motorcycle icon"></i>
<div class="content">
<div class="title">
Motorcycle
</div>
<div class="description">
This is a motorcycle
</div>
</div>
</div>
<div class="step">
<i class="futbol icon"></i>
<div class="content">
<div class="title">
Football
</div>
<div class="description">
This is the Football game
</div>
</div>
</div>
</div >
</body>
</html>
|
Output:
Semantic-UI Step Content
Example 3: In the following program, we will be using the link content.
HTML
<!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 rel="stylesheet"
href=
<script src=
</script>
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<br>
<div class="ui green huge header">
GeeksforGeeks
</div>
<div class="ui large header">
Semantic-UI Step Groups
</div>
<div class="ui steps">
<a class="active step">
<i class="motorcycle icon"></i>
<div class="content">
<div class="title">
Delivery
</div>
<div class="description">
Taking Fastest Route
</div>
</div>
</a>
<a class="step">
<div class="content">
<div class="title">
Total Amount
</div>
<div class="description">
600 RS.
</div>
</div>
</a>
</div>
</body>
</html>
|
Output:
Semantic-UI Step Content
Reference Link: https://semantic-ui.com/elements/step.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...