Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS and jQuery to incorporate in different frameworks.
Semantic UI Advertisement offers us 2 variations of advertisement Centered and Test. In this article, we will know about them briefly.
Semantic UI Advertisement Variations:
- Centered: This variation is used to make centered space for ad.
- Test: This variation is used to make a rectangle-sized test ad.
Syntax:
<div class="ui Advertisement-Variations test ad"> ... </div>
Below examples illustrate the Semantic UI Advertisement Variations:
Example 1: In this example we will see the Centered variations advertisement.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Advertisement Centered Variation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>
Semantic UI Advertisement Centered Variation
</strong>
</center>
<div class="ui centered banner test ad">
</div>
</body>
</html>
Output:
Example 2: In this example, we will see the Test variations advertisement.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Advertisement Test Variation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong>Semantic UI Advertisement Test Variation</strong>
</center>
<div class="ui small rectangle test ad"
data-text="Advertisement Test Variation">
</div>
</body>
</html>
Output:
