Semantic-UI Advertisement Test Variation

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 Test Variation.

The Advertisement component 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 be formatted to help verify placement. The Test Variation can be used to produce test advertisements that can be used to test the design.

Semantic-UI Advertisement Test Variation Class:

test: This class is used to make a rectangle-sized test ad.

Note: If you want you can adjust the text displayed for your test ad placement by changing the value of data-text, and you can also change the size and shape of any advertisement.

Syntax:

<div class="ui test ad" data-text="Ad Unit">
...
</div>

The below example illustrates the Semantic-UI advertisement Test Variation:

Example 1:

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 Test Variation</h2> 
    </center> 
      
    <div class="ui small rectangle test ad"
         data-text="Ad Unit 1"> 
    </div> 
    <div class="ui small rectangle test ad" 
         data-text="Ad Unit 2"> 
    </div> 
</body> 
  
</html>

Output:

Semantic-UI Advertisement Test Variation

Example 2:

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 Test Variation</h2> 
    </center> 
      
    <div class="ui medium square test ad" 
         data-text="Ad Unit 1"> 
    </div> 
    <div class="ui medium rectangle test ad"
         data-text="Ad Unit 2"> 
    </div> 
</body> 
  
</html>