Semantic-UI Label Attached Type
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ 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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ 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