Semantic-UI Segment Emphasis Variation

Last Updated : 11 Mar, 2022

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

Semantic UI Segment is a container used to place contents of the same type or same category. It is used to group related items.

Semantic UI Segment emphasis variation is used to emphasize one segment and make another segment less noticeable. We can make a segment more or less noticeable using this variation.

Semantic UI Segment Emphasis Variation Classes:

primary: The segment appears as a normal segment by using this class.
secondary. The segment appears to be less noticeable by using this class.
tertiary: The segment appears even less noticeable.

Syntax: Emphasis the segment by using the above classes in the segment as follows:

<div class="ui Emphasis-Variation-Classes segment">
    ...
</div>

Example 1: In the following example, we have three segments with different levels of emphasis.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge" />
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
  <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet"/>   
</head>
 
<body>
  <div class="ui container">
    <center>
      <div class="ui header green">
        <h1> GeeksforGeeks </h1>
      </div>
      <strong>  Semantic UI Segment Emphasis Variation </strong>
    </center>
 
    <div class="ui segment">
      <h3>Data Structures</h3>
      <ul class="ui bulleted list">
        <li class="item">Stack</li>
        <li class="item">Heap</li>
        <li class="item">Array</li>
      </ul>
    </div>
    <div class="ui secondary segment">
      <h3>Algorithms</h3>
      <ul class="ui bulleted list">
        <li class="item">Searching</li>
        <li class="item">Sorting</li>
        <li class="item">Graph</li>
      </ul>
    </div>
    <div class="ui tertiary segment">
      <h3>Programming Languages</h3>
      <ul class="ui bulleted list">
        <li class="item">Java</li>
        <li class="item">C++</li>
        <li class="item">Python</li>
      </ul>
    </div>
  </div>
</body>
</html>