Semantic-UI Advertisement Common Unit Type

Last Updated : 24 Feb, 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. In this article, we are going to learn about Advertisement Common Unit 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 appear in common ad unit sizes.

Semantic-UI Advertisement Common Unit Type Class:

medium rectangle: This class is used to make a rectangle-sized vacant place for an advertisement.
banner: This class is used to make a banner type vacant place for an advertisement.
leaderboard: This class is used to make a leaderboard type vacant place for an advertisement.
large rectangle: This class is used to make a large rectangle type vacant place for an advertisement.
half page: This class is used to make a half-page type vacant place for an advertisement.

Syntax:

<div class="ui Common-Unit-Type-Class test ad">
...
</div>

The below example illustrates the Semantic-UI Advertisement Common Unit Type.

Example 1: In this example, we will create all 5 types of Common Unit Advertisement.

HTML

<!DOCTYPE html>
<html>
<head>
    <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>
        <h2>Semantic UI Advertisement Common Unit Type</h2>
    </center>
    <div class="ui medium rectangle test ad" 
         data-text="Medium Rectangle">
    </div>
    <div class="ui banner test ad" 
         data-text="Banner">
    </div>
    <div class="ui leaderboard test ad" 
         data-text="Leaderboard">
    </div>
    <div class="ui large rectangle test ad" 
         data-text="Large Rectangle">
    </div>
    <div class="ui half page test ad" 
         data-text="Half Page">
    </div>
</body>
</html>

Output:

Semantic-UI Advertisement Common Unit Type

Example 2: In this example, we will create a single medium-size advertisement.

HTML

<!DOCTYPE html>
<html>
<head>
    <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>
        <h2>Semantic UI Advertisement Common Unit Type</h2>
    </center>   
    <div class="ui medium rectangle test ad" 
         data-text="Medium Rectangle">
    </div>
</body>
</html>

Output:

Reference: https://semantic-ui.com/views/advertisement.html#common-units

Semantic-UI Advertisement Button Type

pall58183

Improve

Article Tags :

Semantic-UI Advertisement Common Unit Type

Similar Reads

Thank You!

What kind of Experience do you want to share?