Semantic-UI Advertisement Variations
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
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
Reference: https://semantic-ui.com/views/advertisement.html
Last Updated :
08 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...