Semantic-UI Advertisement Banner Type

Last Updated : 08 Mar, 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 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= 
"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> 
        <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 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= 
"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> 
        <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>