<!DOCTYPE HTML>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
< title > UI Label - Semantic< / title >
< link rel = "stylesheet" class = "ui" href = "../src/ui/flat/panel.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" class = "ui" href = "../src/ui/flat/button.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" class = "ui" href = "../src/ui/flat/text.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" class = "ui" href = "../src/ui/flat/form.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" class = "ui" href = "../src/ui/flat/grid.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" class = "ui" href = "../src/ui/flat/divider.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" class = "ui" href = "../src/ui/flat/block.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" class = "ui" href = "../src/ui/flat/segment.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" class = "ui" href = "../src/ui/flat/icons.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" class = "ui" href = "../src/ui/flat/menu.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" class = "ui" href = "../src/ui/flat/label.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" href = "../src/modules/ui/shape.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" href = "library/sidr.css" type = "text/css" media = "screen" / >
< link rel = "stylesheet" href = "stylesheets/example.css" type = "text/css" media = "screen" / >
< script src = "library/jquery.js" type = "text/javascript" > < / script >
< script src = "library/ace/ace.js" type = "text/javascript" > < / script >
< script src = "library/sidr.js" type = "text/javascript" > < / script >
< script src = "library/waypoints.js" type = "text/javascript" > < / script >
< script src = "javascript/semantic.js" type = "text/javascript" > < / script >
< script src = "../src/modules/ui/shape.js" type = "text/javascript" > < / script >
< script src = "../src/modules/behavior/state.js" type = "text/javascript" > < / script >
< / head >
< body id = "example" >
< div class = "ui large vertical menu" id = "menu" >
< div class = "menu" >
< div class = "item" > < a href = "module.html" > < b > Introduction< / b > < / a > < / div >
< div class = "item" > < a href = "download" > < b > Download< / b > < / a > < / div >
< div class = "item" >
< a > < b > UI Collections< / b > < / a >
< div class = "menu" >
< div class = "item" > < a href = "form.html" > Forms< / a > < / div >
< div class = "active item" > < a href = "menu.html" > Menu< / a > < / div >
< div class = "item" > < a href = "element.html" > Grid< / a > < / div >
< div class = "item" > < a href = "table.html" > Table< / a > < / div >
< div class = "item" > < a href = "item.html" > Items< / a > < / div >
< / div >
< / div >
< div class = "item" >
< a > < b > UI Elements< / b > < / a >
< div class = "menu" >
< div class = "item" > < a href = "steps.html" > Steps< / a > < / div >
< div class = "item" > < a href = "button.html" > Button< / a > < / div >
< div class = "item" > < a href = "table.html" > Table< / a > < / div >
< div class = "item" > < a href = "progress.html" > Progress< / a > < / div >
< div class = "item" > < a href = "text.html" > Text Block< / a > < / div >
< div class = "item" > < a href = "header.html" > Headers< / a > < / div >
< div class = "item" > < a href = "header.html" > Segment< / a > < / div >
< div class = "item" > < a href = "column.html" > Columns< / a > < / div >
< div class = "item" > < a href = "element.html" > Elements (Grid System)< / a > < / div >
< div class = "active item" > < a href = "label.html" > Label< / a > < / div >
< div class = "item" > < a href = "item.html" > Items (Lists of Content)< / a > < / div >
< div class = "item" > < a href = "panel.html" > Panels (Type of Menu)< / a > < / div >
< div class = "item" > < a href = "icon.html" > Icons< / a > < / div >
< div class = "item" > < a href = "divider.html" > Dividers< / a > < / div >
< / div >
< / div >
< div class = "item" >
< a > < b > UI Views< / b > < / a >
< div class = "menu" >
< div class = "item" > < a href = "form.html" > Forms< / a > < / div >
< div class = "item" > < a href = "activity.html" > Activity Feed< / a > < / div >
< div class = "item" > < a href = "list.html" > Content List< / a > < / div >
< div class = "item" > < a href = "user-list.html" > User List< / a > < / div >
< / div >
< / div >
< div class = "item" >
< a > < b > UI Modules< / b > < / a >
< div class = "menu" >
< div class = "item" > < a href = "accordion.html" > Accordion< / a > < / div >
< div class = "item" > < a href = "chatroom.html" > Chat Room< / a > < / div >
< div class = "item" > < a href = "modal.html" > Modal< / a > < / div >
< div class = "item" > < a href = "nag.html" > Nag< / a > < / div >
< div class = "item" > < a href = "popup.html" > Popup< / a > < / div >
< div class = "item" > < a href = "search.html" > Search< / a > < / div >
< div class = "item" > < a href = "star.html" > Star Rating< / a > < / div >
< div class = "item" > < a href = "tab.html" > Tabs< / a > < / div >
< / div >
< / div >
< div class = "item" >
< a > < b > Behavioral Modules< / b > < / a >
< div class = "menu" >
< div class = "item" > < a href = "api.html" > API< / a > < / div >
< div class = "item" > < a href = "animation.html" > Animation< / a > < / div >
< div class = "item" > < a href = "validate.html" > Form Validation< / a > < / div >
< div class = "item" > < a href = "placeholder.html" > Placeholder Text< / a > < / div >
< div class = "item" > < a href = "shape.html" > Shape< / a > < / div >
< div class = "item" > < a href = "state.html" > State< / a > < / div >
< / div >
< / div >
< / div >
< / div >
< div class = "ui fixed transparent black menu" >
< div class = "container" >
< div class = "title item" >
Semantic UI: Label
< / div >
< div class = "icon previous link item" >
< a href = "menu.html" > < i class = "icon left-open" > < / i > < / a >
< / div >
< div class = "section dropdown item" >
5 of 14
< div class = "menu" >
< a href = "button.html" class = "item" > 1. Button< / a >
< a href = "form.html" class = "item" > 2. Form< / a >
< a href = "table.html" class = "item" > 3. Table< / a >
< a href = "menu.html" class = "item" > 4. Menu< / a >
< a class = "active item" > 5. Label< / a >
< a href = "text.html" class = "item" > 6. Text Block< / a >
< / div >
< / div >
< div class = "icon next link item" >
< a href = "text.html" > < i class = "icon right-open" > < / i > < / a >
< / div >
< div class = "right menu" >
< a class = "item" href = "https://github.com/quirkyinc/semantic" >
< i class = "icon cloud" > < / i >
< / a >
< a class = "item" href = "https://github.com/quirkyinc/semantic" >
< i class = "icon github" > < / i >
< / a >
< div class = "dropdown item" >
< i class = "icon tint" > < / i > Theme
< div class = "theme menu" >
< div class = "item" data-theme = "flat" > Flat< / div >
< div class = "item" data-theme = "shaded" > Shaded< / div >
< div class = "item" data-theme = "classic" > Classic< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "ui huge left attached vertical side buttons" >
< div class = "ui large blue sidebar button" > Menu< / div >
< / div >
< div class = "segment" >
< div class = "container" >
< h1 > Label< / h1 >
< p > Labels can be used to give descriptions to sections of content. They can be formatted like tags, used to mark separate sections of a group of content.< / p >
< / div >
< / div >
< div class = "main container" >
< div class = "peek" >
< div class = "ui vertical pointing link menu" >
< div class = "active item" > Standard< / div >
< div class = "item" > States< / div >
< div class = "item" > Variations< / div >
< div class = "item" > Groups< / div >
< / div >
< / div >
< h2 > Standard< / h2 >
< div class = "example" >
< h4 > Label< / h4 >
< p > A basic label< / p >
< div class = "ui label" >
Fun
< / div >
< / div >
< div class = "example" >
< h4 > Linkable Label< / h4 >
< p > If an a tag is used, a label will be formatted as a link< / p >
< a class = "ui label" >
Fun
< / a >
< / div >
< div class = "example" >
< h4 > Attached Label< / h4 >
< p > A label attached to a content segment< / p >
< div class = "ui two elements" >
< div class = "element" >
< div class = "ui segment" >
< div class = "ui attached label" > Top Left< / div >
< div class = "ui right attached label" > Top Right< / div >
< div class = "ui bottom attached label" > Bottom Left< / div >
< div class = "ui bottom right attached label" > Bottom Right< / div >
< p style = "margin:40px 0px;" > Hey let's look at labels.< / p >
< / div >
< / div >
< div class = "element" >
< div class = "ui segment" >
< div class = "ui black attached label" > Existing Users< / div >
< div class = "ui fluid form" >
< div class = "field" >
< label > E-mail< / label >
< input type = "text" >
< / div >
< div class = "field" >
< label > Password< / label >
< input type = "password" >
< / div >
< div class = "ui button" > Log in< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "example" >
< h4 > Label with detail< / h4 >
< p > A tag can optionally display a detail< / p >
< div class = "ui label" >
Fun
< div class = "detail" > New< / div >
< / div >
< div class = "ui label" >
Red
< div class = "detail" > 22< / div >
< / div >
< / div >
< div class = "example" >
< h4 > Removable label< / h4 >
< p > A tag can also be removable< / p >
< div class = "ui label" >
Witty
< i class = "icon close" > < / i >
< / div >
< / div >
< h2 > States< / h2 >
< p > Labels only have a single ui state< / p >
< h2 > Variations< / h2 >
< div class = "example" >
< h4 > Colors< / h4 >
< p > A label can have different colors< / p >
< a class = "ui black label" >
First
< / a >
< a class = "ui green label" >
Fun
< / a >
< a class = "ui red label" >
Happy
< / a >
< a class = "ui blue label" >
Smart
< / a >
< a class = "ui purple label" >
Insane
< / a >
< a class = "ui yellow label" >
Witty
< / a >
< a class = "ui pink label" >
Exciting
< / a >
< / div >
< div class = "example" >
< h4 > Tag< / h4 >
< p > A label can look like a tag< / p >
< a class = "ui tag label" >
First
< / a >
< / div >
< div class = "example" >
< h4 > Size< / h4 >
< p > A label can be small or large< / p >
< div class = "ui small label" >
Fun
< / div >
< br > < br >
< div class = "ui large label" >
Fun
< / div >
< / div >
< h2 > Groups< / h2 >
< div class = "example" >
< h4 > Label Groups< / h4 >
< p > Groups can share variations together< / p >
< div class = "ui large labels" >
< div class = "ui label" >
Fun
< / div >
< div class = "ui label" >
Happy
< / div >
< div class = "ui label" >
Smart
< / div >
< div class = "ui label" >
Witty
< / div >
< / div >
< br > < br >
< div class = "ui tag labels" >
< a class = "ui green label" >
Fun < i class = "icon close" > < / i >
< / a >
< a class = "ui red label" >
Happy
< div class = "detail" > 22< / div >
< / a >
< a class = "ui blue label" >
Smart
< / a >
< a class = "ui purple label" >
Insane
< / a >
< a class = "ui yellow label" >
Witty
< / a >
< a class = "ui label" >
Exciting
< / a >
< / div >
< / div >
< / div >
< / body >
< / html >
