<template functional>
  <div class="c-wrapper">
    <div>
      <CRow>
        <CCol col="12" md="6">
          <CCard>
            <CCardHeader>
              <i class="fa fa-align-justify"></i>
              <strong> Bootstrap Badge</strong>
              <div class="c-card-header-actions">
                <a 
                  href="https://coreui.io/vue/docs/3.0/components/Badge" 
                  class="card-header-action" 
                  rel="noreferrer noopener" 
                  target="_blank"
                >
                  <small class="text-muted">docs</small>
                </a>
              </div>
            </CCardHeader>
            <CCardBody>
              <h2>Example heading <CBadge variant="primary">New</CBadge></h2>
              <h3>Example heading <CBadge variant="primary">New</CBadge></h3>
              <h4>Example heading <CBadge variant="primary">New</CBadge></h4>
              <h5>Example heading <CBadge variant="primary">New</CBadge></h5>
              <h6>Example heading <CBadge variant="primary">New</CBadge></h6>
            </CCardBody>
            <CCardFooter>
              <CButton variant="primary">
                Notifications
                <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
              </CButton>
            </CCardFooter>
          </CCard>
        </CCol>
        <CCol col="12" md="6">
          <CCard>
            <CCardHeader>
              <i class="fa fa-align-justify"></i> Badge
              <small>contextual variations</small>
            </CCardHeader>
            <CCardBody>
              <CBadge variant="primary">Primary</CBadge>
              <CBadge variant="secondary">Secondary</CBadge>
              <CBadge variant="success">Success</CBadge>
              <CBadge variant="danger">Danger</CBadge>
              <CBadge variant="warning">Warning</CBadge>
              <CBadge variant="info">Info</CBadge>
              <CBadge variant="light">Light</CBadge>
              <CBadge variant="dark">Dark</CBadge>
            </CCardBody>
          </CCard>
          <CCard>
            <CCardHeader>
              <i class="fa fa-align-justify"></i> Badge
              <small>pills</small>
            </CCardHeader>
            <CCardBody>
              <CBadge pill variant="primary">Primary</CBadge>
              <CBadge pill variant="secondary">Secondary</CBadge>
              <CBadge pill variant="success">Success</CBadge>
              <CBadge pill variant="danger">Danger</CBadge>
              <CBadge pill variant="warning">Warning</CBadge>
              <CBadge pill variant="info">Info</CBadge>
              <CBadge pill variant="light">Light</CBadge>
              <CBadge pill variant="dark">Dark</CBadge>
            </CCardBody>
          </CCard>
          <CCard>
            <CCardHeader>
              <i class="fa fa-align-justify"></i> Badge
              <small>actionable</small>
            </CCardHeader>
            <CCardBody>
              <CBadge href="#" variant="primary">Primary</CBadge>
              <CBadge href="#" variant="secondary">Secondary</CBadge>
              <CBadge href="#" variant="success">Success</CBadge>
              <CBadge href="#" variant="danger">Danger</CBadge>
              <CBadge href="#" variant="warning">Warning</CBadge>
              <CBadge href="#" variant="info">Info</CBadge>
              <CBadge href="#" variant="light">Light</CBadge>
              <CBadge href="#" variant="dark">Dark</CBadge>
            </CCardBody>
          </CCard>
        </CCol>
      </CRow>
    </div>
  </div>
</template>

<script>
export default {
  name: 'badges'
}
</script>
