Semantic-UI Advertisement Rectangle Type

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 Rectangle Type.

It 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 use a common rectangle ad unit size.

Semantic-UI Advertisement Rectangle Type Class:

vertical rectangle: This class is used to make a vertical rectangle test ad.
small rectangle: This class is used to make a small rectangle test ad.

Syntax:

<div class="ui Rectangle-Type-Class test ad">
..
</div>

The below example illustrates the Semantic-UI Advertisement Rectangle Type:

Example 1: In this example, we will create vertical rectangle Advertisement

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 Rectangle Type</h2> 
    </center> 
    <div class="ui vertical rectangle test ad"
         data-text="Vertical Rectangle"> 
    </div> 
    <div class="ui small rectangle test ad"
         data-text="Small Rectangle"> 
    </div> 
</body> 
</html>

Output:

Example 2: In this example, we will create small rectangle Advertisement

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 Rectangle Type</h2> 
    </center> 
    <div class="ui vertical small rectangle test ad" data-text="Vertical Rectangle"></div> 
</body> 
</html>