DIA Frontend

Badges 

<h2 class="mb-3">
        Example
    </h2>

    <h1>
        <span>Example heading</span>
        <span class="badge badge-secondary">New</span>
    </h1>
    <h2>
        <span>Example heading</span>
        <span class="badge badge-secondary">New</span>
    </h2>
    <h3>
        <span>Example heading</span>
        <span class="badge badge-secondary">New</span>
    </h3>
    <h4>
        <span>Example heading</span>
        <span class="badge badge-secondary">New</span>
    </h4>
    <h5>
        <span>Example heading</span>
        <span class="badge badge-secondary">New</span>
    </h5>
    <h6>
        <span>Example heading</span>
        <span class="badge badge-secondary">New</span>
    </h6>

    <p>
        <button type="button" class="btn btn-primary">
            <span>Notifications</span>
            <span class="badge badge-light">4</span> </button>
    </p>

    <p>
        <button type="button" class="btn btn-primary">
            <span>Profile</span>
            <span class="badge badge-light">9</span> <span class="sr-only">unread messages</span>
        </button>
    </p>

    <hr />
    <h2 class="mb-3">
        Contextual variations
    </h2>

    <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-success">Success</span> <span class="badge badge-danger">Danger</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span> <span class="badge badge-light">Light</span> <span class="badge badge-dark">Dark</span>
    <hr />
    <h2 class="mb-3">
        Pill badges
    </h2>

    <span class="badge badge-primary badge-pill">Primary</span> <span class="badge badge-secondary badge-pill">Secondary</span> <span class="badge badge-success badge-pill">Success</span> <span class="badge badge-danger badge-pill">Danger</span> <span class="badge badge-warning badge-pill">Warning</span> <span class="badge badge-info badge-pill">Info</span> <span class="badge badge-light badge-pill">Light</span> <span class="badge badge-dark badge-pill">Dark</span>
    <hr />
    <h2 class="mb-3">
        Links
    </h2>

    <a class="badge badge-primary" href="#">
        Primary
    </a> <a class="badge badge-secondary" href="#">
        Secondary
    </a> <a class="badge badge-success" href="#">
        Success
    </a> <a class="badge badge-danger" href="#">
        Danger
    </a> <a class="badge badge-warning" href="#">
        Warning
    </a> <a class="badge badge-info" href="#">
        Info
    </a> <a class="badge badge-light" href="#">
        Light
    </a> <a class="badge badge-dark" href="#">
        Dark
    </a>
    <hr />
 
{% block main %}
    <h2 class="mb-3">
        Example
    </h2>

    <h1>
        <span>Example heading</span>
        {% include '@atom-badge' with {
            text: 'New',
            style: 'secondary'
        } %}
    </h1>
    <h2>
        <span>Example heading</span>
        {% include '@atom-badge' with {
            text: 'New',
            style: 'secondary'
        } %}
    </h2>
    <h3>
        <span>Example heading</span>
        {% include '@atom-badge' with {
            text: 'New',
            style: 'secondary'
        } %}
    </h3>
    <h4>
        <span>Example heading</span>
        {% include '@atom-badge' with {
            text: 'New',
            style: 'secondary'
        } %}
    </h4>
    <h5>
        <span>Example heading</span>
        {% include '@atom-badge' with {
            text: 'New',
            style: 'secondary'
        } %}
    </h5>
    <h6>
        <span>Example heading</span>
        {% include '@atom-badge' with {
            text: 'New',
            style: 'secondary'
        } %}
    </h6>

    <p>
        <button type="button" class="btn btn-primary">
            <span>Notifications</span>
            {% include '@atom-badge' with {
                text: '4',
                style: 'light'
            } %}
        </button>
    </p>

    <p>
        <button type="button" class="btn btn-primary">
            <span>Profile</span>
            {% include '@atom-badge' with {
                text: '9',
                style: 'light'
            } %}
            <span class="sr-only">unread messages</span>
        </button>
    </p>

    <hr />
    {% for section in sections %}
        {% if section %}
            {% if section.title %}
                <h2 class="mb-3">
                    {{ section.title }}
                </h2>
            {% endif %}

            {% for variant in section.variants %}
                {% include '@atom-badge' with variant %}
            {% endfor %}
        {% endif %}
        <hr />
    {% endfor %}
{% endblock %}
 
{
  "sections": [
    {
      "title": "Contextual variations",
      "variants": [
        {
          "style": "primary",
          "text": "Primary"
        },
        {
          "style": "secondary",
          "text": "Secondary"
        },
        {
          "style": "success",
          "text": "Success"
        },
        {
          "style": "danger",
          "text": "Danger"
        },
        {
          "style": "warning",
          "text": "Warning"
        },
        {
          "style": "info",
          "text": "Info"
        },
        {
          "style": "light",
          "text": "Light"
        },
        {
          "style": "dark",
          "text": "Dark"
        }
      ]
    },
    {
      "title": "Pill badges",
      "variants": [
        {
          "style": "primary",
          "text": "Primary",
          "pill": true
        },
        {
          "style": "secondary",
          "text": "Secondary",
          "pill": true
        },
        {
          "style": "success",
          "text": "Success",
          "pill": true
        },
        {
          "style": "danger",
          "text": "Danger",
          "pill": true
        },
        {
          "style": "warning",
          "text": "Warning",
          "pill": true
        },
        {
          "style": "info",
          "text": "Info",
          "pill": true
        },
        {
          "style": "light",
          "text": "Light",
          "pill": true
        },
        {
          "style": "dark",
          "text": "Dark",
          "pill": true
        }
      ]
    },
    {
      "title": "Links",
      "variants": [
        {
          "style": "primary",
          "text": "Primary",
          "link": "#"
        },
        {
          "style": "secondary",
          "text": "Secondary",
          "link": "#"
        },
        {
          "style": "success",
          "text": "Success",
          "link": "#"
        },
        {
          "style": "danger",
          "text": "Danger",
          "link": "#"
        },
        {
          "style": "warning",
          "text": "Warning",
          "link": "#"
        },
        {
          "style": "info",
          "text": "Info",
          "link": "#"
        },
        {
          "style": "light",
          "text": "Light",
          "link": "#"
        },
        {
          "style": "dark",
          "text": "Dark",
          "link": "#"
        }
      ]
    }
  ]
}

No notes defined.