Open In App

Semantic-UI Advertisement Variations

Improve
Improve
Like Article
Like
Save
Share
Report

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 the predefined CSS and jQuery to incorporate in different frameworks.

Semantic UI Advertisement offers us 2 variations of advertisement Centered and Test. In this article, we will know about them briefly.

Semantic UI Advertisement Variations:

  • Centered: This variation is used to make centered space for ad.
  • Test: This variation is used to make a rectangle-sized test ad.

Syntax:

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

Below examples illustrate the Semantic UI Advertisement Variations:

Example 1: In this example we will see the Centered variations advertisement.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Advertisement Centered Variation</title>
    <link href=
          rel="stylesheet" />
</head>
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>
          Semantic UI Advertisement Centered Variation
        </strong>
    </center>
    <div class="ui centered banner test ad">
    </div>
</body>
</html>


Output:

Semantic UI Advertisement Variations

Semantic UI Advertisement Variations

Example 2: In this example, we will see the Test variations advertisement.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Advertisement Test Variation</title>
    <link href=
          rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="ui header green">
         GeeksforGeeks
        </h1>
        <strong>Semantic UI Advertisement Test Variation</strong>
    </center>
      
    <div class="ui small rectangle test ad"
         data-text="Advertisement Test Variation">
    </div>
</body>
  
</html>


Output:

Semantic UI Advertisement Variations

Semantic UI Advertisement Variations

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



Last Updated : 08 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads