[labels] shortcode arguments
classes:
Type -
[basic|tag|horizontal|floating|circular]
Size -
[mini|tiny|small|medium|large|big|huge|massive]
Color -
[red|green|blue|...]
[label] shortcode arguments
classes:
Type -
[basic|tag|horizontal|floating|circular]
Ribbon -
[ribbon|right ribbon]
Corner -
[left corner|right corner]
Attached -
[top attached|bottom attached|right attached|left attached|bottom left attached|bottom right attached]
Pointing -
[pointing|pointing below|left pointing|right pointing]
Float -
[left floated|right floated]
Size -
[mini|tiny|small|medium|large|big|huge|massive]
Color -
[red|green|blue|...]
Other -
[disabled]
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.
detail:
Label 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 basic orange>Orange</label>
<label yellow>Yellow</label>
<label basic olive>Olive</label>
<label green>Green</label>
<label basic teal>Teal</label>
<label blue>Blue</label>
<label basic violet>Violet</label>
<label purple>Purple</label>
<label basic pink>Pink</label>
<label brown>Brown</label>
<label basic grey>Grey</label>
<label black>Black</label>
Image label
Image
Image
50x50
<label image="//placehold.it/50">Image</label>
<label image="//placehold.it/50" detail="50x50">Image</label>
Icon label
Label
Label
Label
<label icon="heart">Label</label>
<label icon="close">Label</label>
<label>Label<icon close></label>
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.it/300">
  <label left corner icon="heart">
</image>
<image small src="//placehold.it/300" 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>

Leave a Reply

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