Open In App

Semantic-UI Label Attached Type

Last Updated : 28 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

A Semantic UI label is used to create meaningful content classifications. In this article, we will learn to use the Semantic-UI Label Attached Type of the Semantic UI framework. The Semantic-UI Label Attached Type is used to attach a label to the content segment.

Semantic-UI Label Attached Type Classes:

  • top attached: This class is used to attach a label to the top of the content.
  • bottom attached: This class is used to attach a label to the bottom of the content.
  • right attached: This class is used to attach a label to the right of the content.
  • left attached: This class is used to attach a label to the left of the content.

Syntax:

<div class="ui top attached label"> Content... </div>

Example 1: This example describes the uses of Semantic-UI Label Attached Type.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Label Attached Type
    </title>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Label Attached Type</h3>
    </div>
    <br>
  
    <div class="ui container three column grid">
        <div class="column">
            <div class="ui raised segment">
                <div class="ui top attached label">
                    <strong>HTML Tutorials</strong>
                </div>
                <p>
                    HTML stands for HyperText Markup Language.
                    It is used to design web pages using a markup
                    language. It is the combination of Hypertext
                    and Markup language. Hypertext defines the
                    link between the web pages. A markup language
                    is used to define the text document within tag
                    which defines the structure of web pages.
                </p>
            </div>
        </div>
  
        <div class="column">
            <div class="ui raised segment">
                <div class="ui bottom attached label">
                    <strong>CSS Tutorials</strong>
                </div>
                <p>
                    CSS (Cascading Style Sheets) is a stylesheet
                    language used to design the webpage to make
                    it attractive. The reason for using this is
                    to simplify the process of making web pages
                    presentable. It allows you to apply styles to
                    web pages. More importantly, it enables you
                    to do this independent of the HTML that makes
                    up each web page.
                </p>
            </div>
        </div>
  
        <div class="column">
            <div class="ui raised segment">
                <div class="ui bottom right attached label">
                    <strong>HTML Tutorials</strong>
                </div>
                <p>
                    JavaScript is the world most popular lightweight,
                    interpreted compiled programming language. It is
                    also known as scripting language for web pages.
                    It is well-known for the development of web pages,
                    many non-browser environments also use it.
                    JavaScript can be used for Client-side developments
                    as well as Server-side developments.
                </p>
            </div>
        </div>
  
        <div class="column">
            <div class="ui raised segment">
                <div class="ui left bottom attached label">
                    <strong>jQuery Tutorials</strong>
                </div>
                <p>
                    jQuery is an open-source JavaScript library 
                    that simplifies the interactions between an 
                    HTML/CSS document, or more precisely the 
                    Document Object Model (DOM), and JavaScript. 
                    Elaborating the terms, it simplifies HTML 
                    document traversing and manipulation.
                </p>
            </div>
        </div>
  
        <div class="column">
            <div class="ui raised segment">
                <div class="ui top left attached label">
                    <strong>ReactJS Tutorials</strong>
                </div>
                <p>
                    React is a declarative, efficient, and 
                    flexible JavaScript library for building 
                    user interfaces. It's 'V' in MVC. ReactJS 
                    is an open-source, component-based front-
                    end library responsible only for the view 
                    layer of the application. It is maintained 
                    by Facebook. It uses for single page 
                    applications.
                </p>
            </div>
        </div>
  
        <div class="column">
            <div class="ui raised segment">
                <div class="ui top right attached label">
                    <strong>PHP Tutorials</strong>
                </div>
                <p>
                    The term PHP is an acronym for Hypertext 
                    Preprocessor. It is a server-side scripting 
                    language that is used for web development. 
                    HTML codes can also be written in a PHP 
                    file. The PHP codes are executed on the 
                    server-side whereas HTML codes are directly
                    executed on the browser.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Example 2: This example describes the uses of Semantic-UI Label Attached Type with color and size variations.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Label Attached Type
    </title>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Label Attached Type</h3>
    </div>
    <br>
  
    <div class="ui container three column grid">
        <div class="column">
            <div class="ui raised segment">
                <div class="ui top attached green label">
                    <strong>HTML Tutorials</strong>
                </div>
                <p>
                    HTML stands for HyperText Markup Language.
                    It is used to design web pages using a markup
                    language. It is the combination of Hypertext
                    and Markup language. Hypertext defines the
                    link between the web pages. A markup language
                    is used to define the text document within tag
                    which defines the structure of web pages.
                </p>
            </div>
        </div>
  
        <div class="column">
            <div class="ui raised segment">
                <div class="ui bottom attached blue label">
                    <strong>CSS Tutorials</strong>
                </div>
                <p>
                    CSS (Cascading Style Sheets) is a stylesheet
                    language used to design the webpage to make
                    it attractive. The reason for using this is
                    to simplify the process of making web pages
                    presentable. It allows you to apply styles to
                    web pages. More importantly, it enables you
                    to do this independent of the HTML that makes
                    up each web page.
                </p>
            </div>
        </div>
  
        <div class="column">
            <div class="ui raised segment">
                <div class="ui bottom right attached red label">
                    <strong>HTML Tutorials</strong>
                </div>
                <p>
                    JavaScript is the world most popular lightweight,
                    interpreted compiled programming language. It is
                    also known as scripting language for web pages.
                    It is well-known for the development of web pages,
                    many non-browser environments also use it.
                    JavaScript can be used for Client-side developments
                    as well as Server-side developments.
                </p>
            </div>
        </div>
  
        <div class="column">
            <div class="ui raised segment">
                <div class="ui left bottom attached yellow small label">
                    <strong>jQuery Tutorials</strong>
                </div>
                <p>
                    jQuery is an open-source JavaScript library 
                    that simplifies the interactions between an 
                    HTML/CSS document, or more precisely the 
                    Document Object Model (DOM), and JavaScript. 
                    Elaborating the terms, it simplifies HTML 
                    document traversing and manipulation.
                </p>
            </div>
        </div>
  
        <div class="column">
            <div class="ui raised segment">
                <div class="ui top left attached red medium label">
                    <strong>ReactJS Tutorials</strong>
                </div>
                <p>
                    React is a declarative, efficient, and 
                    flexible JavaScript library for building 
                    user interfaces. It's 'V' in MVC. ReactJS 
                    is an open-source, component-based front-
                    end library responsible only for the view 
                    layer of the application. It is maintained 
                    by Facebook. It uses for single page 
                    applications.
                </p>
            </div>
        </div>
  
        <div class="column">
            <div class="ui raised segment">
                <div class="ui top right attached green large label">
                    <strong>PHP Tutorials</strong>
                </div>
                <p>
                    The term PHP is an acronym for Hypertext 
                    Preprocessor. It is a server-side scripting 
                    language that is used for web development. 
                    HTML codes can also be written in a PHP 
                    file. The PHP codes are executed on the 
                    server-side whereas HTML codes are directly
                    executed on the browser.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Reference: https://semantic-ui.com/elements/label.html#attached



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads