Label
| Classes |
|
| Classes |
| ||||||||||||||||||
href | The href/url/link argument can be used to specify a link. | ||||||||||||||||||
icon | Name of the icon to use. | ||||||||||||||||||
image | URL of the image to use. | ||||||||||||||||||
alt | Alternative text for the image. | ||||||||||||||||||
detail | Label detail text. |
<label mini>Mini</label>
<label tiny>Tiny</label>
<label small>Small</label>
<label>Medium</label>
<label large>Large</label>
<label big>Big</label>
<label huge>Huge</label>
<label massive>Massive</label><label red>Red</label>
<label orange>Orange</label>
<label yellow>Yellow</label>
<label olive>Olive</label>
<label green>Green</label>
<label teal>Teal</label>
<label blue>Blue</label>
<label violet>Violet</label>
<label purple>Purple</label>
<label pink>Pink</label>
<label brown>Brown</label>
<label grey>Grey</label>
<label black>Black</label><label horizontal>Horizontal</label>
<header tiny display>Label <label blue horizontal>1.0</label></header><label basic red>Red</label>
<label basic orange>Orange</label>
<label basic yellow>Yellow</label>
<label basic olive>Olive</label>
<label basic green>Green</label>
<label basic teal>Teal</label>
<label basic blue>Blue</label>
<label basic violet>Violet</label>
<label basic purple>Purple</label>
<label basic pink>Pink</label>
<label basic brown>Brown</label>
<label basic grey>Grey</label>
<label basic black>Black</label>
John
Jane
Jane<label image="/avatars/4s.png">John</label>
<label image="/avatars/7s.png" detail="2018">Jane</label>
<label lazyload image="/avatars/8s.png" detail="2018">Jane</label><label icon="heart">Label</label>
<label icon="close">Label</label>
<label>Label<icon close></label>
<label><icon home>Label</label><form>
<field six wide>
<input placeholder="First name">
<label pointing>Please enter a value</label>
</field>
<divider>
<field six wide>
<label pointing below>Please enter a value</label>
<input placeholder="Last name">
</field>
<divider>
<field inline>
<input placeholder="Username">
<label red basic left pointing>That name is taken!</label>
</field>
<divider>
<field inline error>
<label red basic right pointing>Your password must be 8 characters or more</label>
<input type="password" value="hunter2">
</field>
</form><image small src="//placehold.co/300x300">
<label left corner icon="heart">
</image>
<image small src="//placehold.co/300x300" url="#">
<label red right corner icon="save">
</image><label tag>New</label>
<label red tag>Upcoming</label>
<label teal tag detail="3">Featured</label><segment raised>
<label red ribbon>Overview</label>
...
</segment><labels red>
<label>Label</label>
<label>Label</label>
<label>Label</label>
</labels>
<divider hidden>
<labels tag>
<label>Label</label>
<label>Label</label>
<label>Label</label>
</labels>
<divider hidden>
<labels blue circular>
<label>1</label>
<label>2</label>
<label>3</label>
</labels>
<divider hidden>
<labels empty circular>
<label red>
<label yellow>
<label green>
</labels><label primary>Primary</label>
<label secondary>Secondary</label><header>Documentation <label blue>Version 3</label></header>
<header large>Documentation <label blue>Version 3</label></header>
<header huge>Documentation <label blue>Version 3</label></header>
<header tiny display>Documentation <label blue>Version 3</label></header>
<header small display>Documentation <label blue>Version 3</label></header>
<header display>Documentation <label blue>Version 3</label></header>Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.
Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.
Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.
Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.
Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.
Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.
<segment>
<label top attached>Top attached</label>
<lorem 1 short>
</segment>
<segment>
<label bottom attached>Bottom attached</label>
<lorem 1 short>
</segment>
<segment>
<label top right attached>Top right attached</label>
<lorem 1 short>
</segment>
<segment>
<label top left attached>Top left attached</label>
<lorem 1 short>
</segment>
<segment>
<label bottom left attached>Bottom left attached</label>
<lorem 1 short>
</segment>
<segment>
<label bottom right attached>Bottom right attached</label>
<lorem 1 short>
</segment>