This website requires JavaScript to deliver the best possible experience.

Label

    LabelIconpersonImgpersonImg & icon
    <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')
      is-tinyis-smallis-normalis-largeis-massive
      <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
        is-primaryis-secondaryis-infois-successis-warningis-dangeris-blackis-white
        <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
          is-tinyis-smallis-normalis-largeis-massive
          <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
            is-roundedis-roundedis-roundedis-roundedis-roundedis-roundedis-roundedis-rounded
            <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
            ModifierDescriptionClass
            Colorindicates the element state

            .is-black

            .is-white

            .is-primary

            .is-secondary

            .is-info

            .is-success

            .is-warning

            .is-danger

            Sizechanges the element size based on font-size

            .is-tiny

            .is-small

            .is-normal

            .is-large

            .is-massive

            Roundedadd rounded corners to a Label.is-rounded