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. In this article, we are going to learn about Advertisement Leaderboard Type.
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. An ad displays third-party promotional content and it can use leaderboard ad unit size.
Semantic-UI Advertisement Leaderboard Type Classes:
- leaderboard: This class is used to make a leaderboard test ad.
- large: This class is used to make large size leaderboard test ad.
- billboard: This class is used to make billboard test ad.
Syntax:
<div class="ui Leaderboard-Type-Class test ad"> ... </div>
Example 1: The below example illustrates multiple Semantic-UI Advertisement Leaderboard Type.
<!DOCTYPE html><html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">GeeksForGeeks</h1>
<h2>Semantic UI Advertisement Leaderboard Type</h2>
</center>
<div class="ui leaderboard test ad"
data-text="Leaderboard">
</div>
<div class="ui large leaderboard test ad"
data-text="Large Leaderboard">
</div>
<div class="ui billboard test ad"
data-text="Billboard">
</div>
</body>
</html>
|
Output:
Semantic-UI Advertisement Leaderboard Type
Example 2: The below example illustrates a single Semantic-UI Advertisement Leaderboard Type.
<!DOCTYPE html><html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">GeeksForGeeks</h1>
<h2>Semantic UI Advertisement Leaderboard Type</h2>
</center>
<div class="ui leaderboard test ad"
data-text="Leaderboard">
</div>
</body>
</html>
|
Output:
Semantic-UI Advertisement Leaderboard Type
Reference: https://semantic-ui.com/views/advertisement.html#leaderboards