Skip to content
Related Articles

Related Articles

Semantic-UI Advertisement Types

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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

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

Semantic UI Advertisement Types

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!