Semantic-UI Advertisement Netboard 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 Netboard 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 netboard ad unit size.

Semantic-UI Advertisement Netboard Type Class:

netboard: This method is used to provide Netboard size place for an ad.

Syntax:

<div class="ui netboard test ad" data-text="Netboard"></div>

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

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI</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> 
        <h2>Semantic UI Advertisement Netboard Type</h2> 
    </center> 
    <div class="ui netboard test ad"
         data-text="Netboard"> 
    </div> 
</body> 
</html> 

Output:

Semantic-UI Advertisement Netboard Type

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI</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> 
        <h2>Semantic UI Advertisement Netboard Type</h2> 
    </center> 
    <div class="ui netboard test ad" 
         data-text="Netboard"> 
    </div> 
    GeeksForGeeks is a computer science portal for Geeks. 
    <div class="ui netboard test ad" 
         data-text="Netboard"> 
    </div> 
  
</body> 
  
</html> 