<span class="label">Label</span>
<span class="label">
<svg viewbox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
<span>icon</span>
</span>
<span class="label"><img src="https://picsum.photos/512/512?image=1005" alt="person"/><span>img</span></span>
<span class="label">
<img src="https://picsum.photos/512/512?image=1014" alt="person"/><span>img & icon</span>
<svg viewbox="0 0 24 24" class="icon">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
</svg>
</span>
span.label Label
span.label
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
span icon
span.label
img(src="https://picsum.photos/512/512?image=1005" alt="person")
span img
span.label
img(src="https://picsum.photos/512/512?image=1014" alt="person")
span img & icon
svg(class="icon" viewbox='0 0 24 24')
path( d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z')
<span class="label is-tiny">is-tiny</span>
<span class="label is-small">is-small</span>
<span class="label is-normal">is-normal</span>
<span class="label is-large">is-large</span>
<span class="label is-massive">is-massive</span>
span.label.is-tiny is-tiny
span.label.is-small is-small
span.label.is-normal is-normal
span.label.is-large is-large
span.label.is-massive is-massive
<span class="label is-primary">is-primary</span>
<span class="label is-secondary">is-secondary</span>
<span class="label is-info">is-info</span>
<span class="label is-success">is-success</span>
<span class="label is-warning">is-warning</span>
<span class="label is-danger">is-danger</span>
<span class="label is-black">is-black</span><span class="label is-white">is-white</span>
span.label.is-primary is-primary
span.label.is-secondary is-secondary
span.label.is-info is-info
span.label.is-success is-success
span.label.is-warning is-warning
span.label.is-danger is-danger
span.label.is-black is-black
span.label.is-white is-white
<span class="label is-tiny">
<svg viewbox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
<span>is-tiny</span>
</span>
<span class="label is-small">
<svg viewbox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
<span>is-small</span>
</span>
<span class="label is-normal">
<svg viewbox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
<span>is-normal</span>
</span>
<span class="label is-large">
<svg viewbox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
<span>is-large</span>
</span>
<span class="label is-massive">
<svg viewbox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
<span>is-massive</span>
</span>
span.label.is-tiny
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
span is-tiny
span.label.is-small
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
span is-small
span.label.is-normal
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
span is-normal
span.label.is-large
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
span is-large
span.label.is-massive
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
span is-massive
<span class="label is-rounded is-primary">is-rounded</span>
<span class="label is-rounded is-secondary">is-rounded</span>
<span class="label is-rounded is-info">is-rounded</span>
<span class="label is-rounded is-success">is-rounded</span>
<span class="label is-rounded is-warning">is-rounded</span>
<span class="label is-rounded is-danger">is-rounded</span>
<span class="label is-rounded is-black">is-rounded</span>
<span class="label is-rounded is-white">is-rounded</span>
span.label.is-rounded.is-primary is-rounded
span.label.is-rounded.is-secondary is-rounded
span.label.is-rounded.is-info is-rounded
span.label.is-rounded.is-success is-rounded
span.label.is-rounded.is-warning is-rounded
span.label.is-rounded.is-danger is-rounded
span.label.is-rounded.is-black is-rounded
span.label.is-rounded.is-white is-rounded
Modifier | Description | Class |
---|---|---|
Color | indicates the element state | .is-black .is-white .is-primary .is-secondary .is-info .is-success .is-warning .is-danger |
Size | changes the element size based on font-size | .is-tiny .is-small .is-normal .is-large .is-massive |
Rounded | add rounded corners to a Label | .is-rounded |