Semantic-UI Segment Basic Variation

Last Updated : 09 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 segment is a container used to place contents of the same type or same category. It is used to group related items. The Semantic UI Segment Basic Variation has no formatting appears with no borders. The segment has just padding around it and nothing else.

Semantic UI Segment Basic Variation Class:

basic: This class is used to create a segment that has no special formatting other than padding around it.

Syntax: Add the basic class to the segment as follows:

<div class="ui basic segment">
    ...
</div>

Example: In the following example, we have three basic segments and a button that toggles the basic variation.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body>
    <div class="ui container">
        <center>
            <div class="ui header green">
                <h1>
                    GeeksforGeeks
                </h1>
            </div>
            <strong>
                Semantic UI Segment Basic Variation
            </strong>
            <br />
            <br />
            <button class="ui inverted green button"
                    onclick="toggleBasicVariation()">
                Toggle Basic Variation
            </button>
        </center>

        <div class="ui basic 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 basic 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 basic 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>
    <script>
        const toggleBasicVariation = () => {
            $('.ui.segment').toggleClass('basic')
        }
    </script>
</body>

</html>

Output:

Reference: https://semantic-ui.com/elements/segment.html#basic

Semantic-UI Segment Compact Variation

RajeevSarkar

Improve

Article Tags :

Semantic-UI Segment Basic Variation

Similar Reads

Thank You!

What kind of Experience do you want to share?