bootstrap_italia-8.x-0.x-dev/components/components-2/badge/badge-demo.html.twig

{#
/**
 * @file
 * Badge demo.
 *
 * Example:
 *
   {% include '@bi-bcl/badge/badge-demo.html.twig' %}
 */
#}
{% apply spaceless %}

  {% set variants = [
    "primary", "secondary", "success", "danger", "warning", "white", "dark", "light", "black"
  ] %}


  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Badge with title'|t,
    path_demo_code: '/badge/badge-demo.html.twig#L25',
  } %}
    {% block content %}
      {% for i in 1..6 %}
        <h{{ i }}>Example title h{{ i }}
          {% include '@bi-bcl/badge/badge.html.twig' with {
            label: 'New'|t,
            background: 'secondary',
          } %}
        </h{{ i }}>
      {% endfor %}
    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Badge with button'|t,
    path_demo_code: '/badge/badge-demo.html.twig#L40',
  } %}
    {% block content %}

      {% embed '@bi-bcl/button/button.html.twig' with {
        label: 'Notification'|t,
        variant: 'primary',
        button_classes: ['m-2'],
      } %}
        {% block after %}
          &nbsp;
          {% include '@bi-bcl/badge/badge.html.twig' with {
            label: '4',
            text_color: 'primary',
            background: 'white',
            assistive_text: 'Unread Messages'|t
          } %}
        {% endblock %}
      {% endembed %}

      {% embed '@bi-bcl/button/button.html.twig' with {
        label: 'Inbox'|t,
        variant: 'primary',
        button_classes: ['m-3', 'position-relative'],
      } %}
        {% block after %}
          {% include '@bi-bcl/badge/badge.html.twig' with {
            label: '99+',
            background: 'danger',
            assistive_text: 'Unread Messages'|t,
            rounded_pill: true,
            badge_classes: ['position-absolute', 'top-0', 'start-100', 'translate-middle']
          } %}
        {% endblock %}
      {% endembed %}

      {% embed '@bi-bcl/button/button.html.twig' with {
        label: 'Profile'|t,
        variant: 'primary',
        button_classes: ['m-3', 'position-relative'],
      } %}
        {% block after %}
          {% include '@bi-bcl/badge/badge.html.twig' with {
            label: null,
            background: 'danger',
            assistive_text: 'New alerts'|t,
            rounded_pill: true,
            badge_classes: ['position-absolute', 'top-0', 'start-100', 'translate-middle', 'p-2', 'border', 'border-light', 'rounded-circle']
          } %}
        {% endblock %}
      {% endembed %}

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Badge contestual variants'|t,
    path_demo_code: '/badge/badge-demo.html.twig#L98',
  } %}
    {% block content %}
      <p>
        {% for variant in variants %}
          {% include '@bi-bcl/badge/badge.html.twig' with {
            label: variant,
            background: variant,
            assistive_text: 'Variants'|t
          } %}
          &nbsp;
        {% endfor %}
      </p>
      <p>
        {% for variant in variants %}
          {% include '@bi-bcl/badge/badge.html.twig' with {
            label: variant,
            background: variant,
            outline: true,
            assistive_text: 'Variants'|t
          } %}
          &nbsp;
        {% endfor %}
      </p>
      <p>
        {% for variant in variants %}
          {% include '@bi-bcl/badge/badge.html.twig' with {
            label: variant,
            background: variant,
            rounded_pill: true,
            assistive_text: 'Variants'|t
          } %}
          &nbsp;
        {% endfor %}
      </p>
      <p>
        {% for variant in variants %}
          {% include '@bi-bcl/badge/badge.html.twig' with {
            label: variant,
            background: variant,
            rounded_pill: true,
            outline: true,
            assistive_text: 'Variants'|t
          } %}
          &nbsp;
        {% endfor %}
      </p>
    {% endblock %}
  {% endembed %}{# End embed demo. #}
{% endapply %}