Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Advertisement Banner Type

Improve Article
Save Article
Like Article
  • Last Updated : 08 Mar, 2022
Improve Article
Save Article
Like 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 about the Banner type advertisement. We can manipulate the banner type of advertisement. 

Semantic UI Advertisement Banner Class:

  • banner: This class is used to create normal banner-type advertisements.
  • top: This class is used to create wide banner type advertisement, here banner class is a must with the.
  • vertical: This class is used to create vertical thin banner-type advertisements.
  • half: This class is used to create half-banner-type advertisements.

Syntax:

<div class="ui banner-class test ad">
  ....
</div>

Below examples  illustrate  the Semantic UI Advertisement Banner Type:

Example 1: In this article, we will use a normal banner and top banner.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Advertisement Banner Type</title>
    <link href=
          rel="stylesheet" />
</head>
<body>
    <center>
        <h1 class="ui header green">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Advertisement Banner Type</strong>
    </center>
    <strong>Banner:</strong>
    <div class="ui banner test ad"
         data-text="Banner">
    </div>
    <strong>Top Banner:</strong>
    <div class="ui top banner test ad"
         data-text="Top Banner">
    </div>
</body>
</html>


Output:

Semantic UI Advertisement

Semantic UI Advertisement Banner Type

Example 2: In this article we will use vertical and half banner.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Advertisement Banner Type</title>
    <link href=
          rel="stylesheet" />
</head>
<body>
    <center>
        <h1 class="ui header green">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Advertisement Banner Type</strong>
    </center>
    <strong>Vertical Banner:</strong>
    <div class="ui vertical banner test ad"
         data-text="Vertical Banner">
    </div>
    <strong>Half Banner:</strong>
    <div class="ui half banner test ad"
         data-text="Half Banner">
    </div>
</body>
</html>


Output:

Semantic UI Advertisement Type

Semantic UI Advertisement Type

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


My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!