Badges and Labels

Badges and Labels

<template>
  <!-- Card component -->
  <div class="slds-card">
    <div class="slds-grid slds-wrap">
    
      <!-- New badge -->
      <div class="slds-col slds-large-size_1-of-12 slds-medium-size_1-of-12 slds-size_1-of-12">
        <span class="slds-badge slds-badge_lightest">New</span>
        
      </div>
      
      <!-- High Priority badge -->
      <div class="slds-col slds-large-size_1-of-12 slds-medium-size_1-of-12 slds-size_1-of-12">
        <span class="slds-badge slds-theme_warning">High Priority</span> 
      </div>
      
      <!-- Completed label -->
      <div class="slds-col slds-large-size_1-of-12 slds-medium-size_1-of-12 slds-size_1-of-12">
        <span class="slds-badge">Completed</span>
      </div>
      
      <!-- Approved label -->
      <div class="slds-col slds-large-size_1-of-12 slds-medium-size_1-of-12 slds-size_1-of-12">
        <span class="slds-badge slds-theme_success">Approved</span>
      </div>
      
    </div>
  </div>
</template>