Semantic-UI Advertisement Types
Last Updated :
22 Apr, 2022
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 predefined CSS and jQuery to incorporate different frameworks. Semantic UI Advertisement offers us 10 types of advertisement ads, Common Units, Mobile, Rectangle, Button, Skyscraper, Banner, Leaderboards, Panorama, and netboard. In this article, we will know all about them briefly, we have individual articles for them.
Semantic UI Advertisement Types:
- Ad: This type is used to display a standard ad.
- Common Units: This type is used to make advertisements in a way so it can appear in common ad unit sizes.
- Mobile: This type is used to display advertisements according to mobile dimensions.
- Rectangle: This type is used to make a rectangle test ad.
- Button: This type is used so the ad can use button ad unit size.
- Skyscraper: This type is used so the ad can use skyscraper ad unit size.
- Banner: This type is used so the ad can use banner ad unit size.
- Leaderboards: This type is used to make a leaderboard test ad.
- Panorama: This type is used so the ad can use panorama ad unit size.
- Netboard: This type is used so the ad can use netboard ad unit size.
Syntax:
<div class="ui Advertisement-Type ad">
...
</div>
Below examples illustrate the Semantic UI Advertisement Types:
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Advertisement Types</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong>Semantic UI Advertisement Type</strong>
</center>
<strong>Ad & Rectangle:</strong>
<div class="ui medium rectangle test ad"
data-text="Medium Rectangle">
</div>
<strong>Button:</strong>
<div class="ui button test ad"
data-text="Button">
</div>
<strong>Leaderboard:</strong>
<div class="ui leaderboard test ad"
data-text="Leaderboard">
</div>
<strong>Common Units:</strong>
<div class="ui half page test ad"
data-text="Half Page">
</div>
</body>
</html>
|
Output:
Semantic UI Advertisement Types
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Advertisement Types</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong>Semantic UI Advertisement Type</strong>
</center>
<strong>Panorama:</strong>
<div class="ui panorama test ad"
data-text="Panorama">
</div>
<strong>Netboard:</strong>
<div class="ui netboard test ad"
data-text="Netboard ">
</div>
<strong>Banner:</strong>
<div class="ui banner test ad"
data-text="Banner">
</div>
</body>
</html>
|
Output:
Semantic UI Advertisement Types
Reference: https://semantic-ui.com/views/advertisement.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...