Label

Labels shortcode arguments
Classes
Typebasic tag horizontal floating circular
Sizemini tiny small medium large big huge massive
Colorred orange yellow olive green teal blue violet purple pink brown grey black
Label shortcode arguments
Classes
Typebasic tag horizontal floating circular
Ribbonribbon right ribbon
Cornerleft corner right corner
Attachedtop attached bottom attached right attached left attached bottom left attached bottom right attached
Pointingpointing pointing below left pointing right pointing
Floatleft floated right floated
Sizemini tiny small medium large big huge massive
Colorred orange yellow olive green teal blue violet purple pink brown grey black
Otherdisabled
hrefThe href/url/link argument can be used to specify a link.
iconName of the icon to use.
imageURL of the image to use.
altAlternative text for the image.
detailLabel detail text.
Label sizes
Mini
Tiny
Small
Medium
Large
Big
Huge
Massive
<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 colors
Red
Orange
Yellow
Olive
Green
Teal
Blue
Violet
Purple
Pink
Brown
Grey
Black
<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>
Basic labels
Red
Orange
Yellow
Olive
Green
Teal
Blue
Violet
Purple
Pink
Brown
Grey
Black
<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>
Image label
John
Jane
2018
Jane
2018
<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>
Icon label
Label
Label
Label
Label
<label icon="heart">Label</label>
<label icon="close">Label</label>
<label>Label<icon close></label>
<label><icon home>Label</label>
Notes
Icons are displayed on the left, with the exception of close icon. Icons can be an argument or a separate shortcode.
Pointing label
Please enter a value
Please enter a value
That name is taken!
Your password must be 8 characters or more
<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>
Corner label
<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>
Tag labels
New
Upcoming
Featured
3
<label tag>New</label>
<label red tag>Upcoming</label>
<label teal tag detail="3">Featured</label>
Ribbon label
Overview
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non vehicula mauris. Nam vel arcu orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam justo leo, fermentum at justo in, vehicula porta odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sagittis metus consectetur sapien venenatis, eget vehicula arcu vehicula.
<segment raised>
  <label red ribbon>Overview</label>
  ...
</segment>
Label groups
Label
Label
Label
Label
Label
Label
1
2
3
<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>
Brand colors
Primary
Secondary
<label primary>Primary</label>
<label secondary>Secondary</label>
Label in header
Documentation
Version 3
Documentation
Version 3
Documentation
Version 3
Documentation
Version 3
Documentation
Version 3
Documentation
Version 3
<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>
Attached labels
Top attached

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.

Bottom attached

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.

Top right attached

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.

Top left attached

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.

Bottom left attached

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.

Bottom right attached

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>

One response to “Label

Leave a comment

Your email address will not be published. Required fields are marked *