DOTD Component Library

Alert: With Pagination 

<div class="c-alert c-alert--pagination">

    <div class="c-pagination c-pagination--sm c-alert__pagination">
        <button class="o-button o-button--icon c-pagination__button c-pagination__button--prev" disabled aria-label="Previous">
            <span class="o-icon o-icon--md">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7071 7.29289C15.0976 7.68342 15.0976 8.31658 14.7071 8.70711L11.4142 12L14.7071 15.2929C15.0976 15.6834 15.0976 16.3166 14.7071 16.7071C14.3166 17.0976 13.6834 17.0976 13.2929 16.7071L9.29289 12.7071C8.90237 12.3166 8.90237 11.6834 9.29289 11.2929L13.2929 7.29289C13.6834 6.90237 14.3166 6.90237 14.7071 7.29289Z" />
                </svg>
            </span>
        </button>
        <div class="c-pagination__counter">
            <span class="c-pagination__counter c-pagination__counter--active">1</span>
            <span class="c-pagination__counter c-pagination__counter--divider">/</span>
            <span class="c-pagination__counter c-pagination__counter--total">5</span>
        </div>
        <button class="o-button o-button--icon c-pagination__button c-pagination__button--next" aria-label="Next">
            <span class="o-icon o-icon--md">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.5858 12L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289Z" />
                </svg>
            </span>
        </button>
    </div>
    <div class="c-alert__items">
        <div class="c-alert__item is-active">
            <span class="o-icon o-icon--md c-alert__icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3 11.25C3 6.95165 7.15905 3.75 12 3.75C16.8409 3.75 21 6.95165 21 11.25C21 13.0141 20.2499 14.5969 19.0855 15.8642L19.4951 19.414C19.5254 19.6772 19.4147 19.9369 19.2037 20.0972C18.9927 20.2575 18.7128 20.2946 18.4674 20.1947L14.2797 18.4913C13.5273 18.6864 12.7812 18.75 12 18.75C7.15905 18.75 3 15.5484 3 11.25ZM12 5.25C7.69095 5.25 4.5 8.04835 4.5 11.25C4.5 14.4517 7.69095 17.25 12 17.25C12.7787 17.25 13.451 17.1792 14.1095 16.9816C14.2734 16.9325 14.4491 16.9408 14.6076 17.0053L17.8598 18.3282L17.5549 15.686C17.5287 15.4585 17.6078 15.2316 17.7697 15.0697C18.8609 13.9785 19.5 12.6602 19.5 11.25C19.5 8.04835 16.3091 5.25 12 5.25ZM8.25 9.75C8.25 9.33579 8.58579 9 9 9H15C15.4142 9 15.75 9.33579 15.75 9.75C15.75 10.1642 15.4142 10.5 15 10.5H9C8.58579 10.5 8.25 10.1642 8.25 9.75ZM9 12C8.58579 12 8.25 12.3358 8.25 12.75C8.25 13.1642 8.58579 13.5 9 13.5H12.75C13.1642 13.5 13.5 13.1642 13.5 12.75C13.5 12.3358 13.1642 12 12.75 12H9Z" />
                </svg>
            </span>
            Alert message goes here.
            <a class="o-link c-alert__link u-text-decoration--underline" href="#" target="_self">
                <span class="o-link__label">
                    Link
                </span>
            </a>
        </div>
        <div class="c-alert__item">
            <span class="o-icon o-icon--md c-alert__icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.5C7.85786 4.5 4.5 7.85786 4.5 12C4.5 16.1421 7.85786 19.5 12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 7.85786 16.1421 4.5 12 4.5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12ZM12 10.5C12.4142 10.5 12.75 10.8358 12.75 11.25V15.75C12.75 16.1642 12.4142 16.5 12 16.5C11.5858 16.5 11.25 16.1642 11.25 15.75V11.25C11.25 10.8358 11.5858 10.5 12 10.5ZM12.75 8.25C12.75 8.66421 12.4142 9 12 9C11.5858 9 11.25 8.66421 11.25 8.25C11.25 7.83579 11.5858 7.5 12 7.5C12.4142 7.5 12.75 7.83579 12.75 8.25Z" />
                </svg>
            </span>
            Info alert message goes here.
            <a class="o-link c-alert__link u-text-decoration--underline" href="#" target="_self">
                <span class="o-link__label">
                    Link
                </span>
            </a>
        </div>
        <div class="c-alert__item">
            <span class="o-icon o-icon--md c-alert__icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 12C4.5 7.85786 7.85786 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17.0303 9.53033C17.3232 9.23744 17.3232 8.76256 17.0303 8.46967C16.7374 8.17678 16.2626 8.17678 15.9697 8.46967L10.5 13.9393L8.03033 11.4697C7.73744 11.1768 7.26256 11.1768 6.96967 11.4697C6.67678 11.7626 6.67678 12.2374 6.96967 12.5303L9.96967 15.5303C10.2626 15.8232 10.7374 15.8232 11.0303 15.5303L17.0303 9.53033Z" />
                </svg>
            </span>
            Success alert message goes here.
            <a class="o-link c-alert__link u-text-decoration--underline" href="#" target="_self">
                <span class="o-link__label">
                    Link
                </span>
            </a>
        </div>
        <div class="c-alert__item">
            <span class="o-icon o-icon--md c-alert__icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.5C7.85786 4.5 4.5 7.85786 4.5 12C4.5 16.1421 7.85786 19.5 12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 7.85786 16.1421 4.5 12 4.5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12ZM12 7.5C12.4142 7.5 12.75 7.83579 12.75 8.25V12.75C12.75 13.1642 12.4142 13.5 12 13.5C11.5858 13.5 11.25 13.1642 11.25 12.75V8.25C11.25 7.83579 11.5858 7.5 12 7.5ZM12.75 15.75C12.75 16.1642 12.4142 16.5 12 16.5C11.5858 16.5 11.25 16.1642 11.25 15.75C11.25 15.3358 11.5858 15 12 15C12.4142 15 12.75 15.3358 12.75 15.75Z" />
                </svg>
            </span>
            Warning alert message goes here.
            <a class="o-link c-alert__link u-text-decoration--underline" href="#" target="_self">
                <span class="o-link__label">
                    Link
                </span>
            </a>
        </div>
        <div class="c-alert__item">
            <span class="o-icon o-icon--md c-alert__icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.7235 17.2425L14.0434 4.61249C13.826 4.19998 13.4887 3.86249 13.0763 3.64498C11.9443 3.04497 10.5423 3.47998 9.94247 4.61249L3.26989 17.2425C3.08996 17.5725 3 17.9475 3 18.33C3 18.945 3.24738 19.5225 3.68228 19.9575C4.11708 20.3925 4.68688 20.61 5.31663 20.625H18.6843C19.0592 20.625 19.4265 20.535 19.7639 20.3625C20.3111 20.0775 20.7085 19.59 20.8959 19.005C21.0759 18.4125 21.0234 17.79 20.731 17.2425H20.7235ZM19.4564 18.5625C19.389 18.7725 19.2541 18.9375 19.0592 19.035C18.9467 19.095 18.8117 19.125 18.6768 19.125H5.30912C5.11419 19.11 4.88932 19.0425 4.73932 18.8925C4.58941 18.7425 4.49945 18.54 4.49945 18.3225C4.49945 18.1875 4.52947 18.06 4.58941 17.9475L11.2695 5.30998C11.4794 4.91249 11.9742 4.75497 12.3791 4.97248C12.4466 5.00807 12.5091 5.05377 12.5642 5.10722C12.6252 5.16643 12.6771 5.23509 12.7164 5.30998L19.3965 17.94C19.494 18.1275 19.5165 18.3525 19.4564 18.555V18.5625ZM11.9967 14.625C12.4091 14.625 12.7464 14.2875 12.7464 13.875V9.37497C12.7464 8.96248 12.4091 8.62497 11.9967 8.62497C11.5843 8.62497 11.247 8.96248 11.247 9.37497V13.875C11.247 14.2875 11.5843 14.625 11.9967 14.625ZM13.1213 16.5C13.1213 17.1213 12.6178 17.625 11.9967 17.625C11.3757 17.625 10.8721 17.1213 10.8721 16.5C10.8721 15.8786 11.3757 15.375 11.9967 15.375C12.6178 15.375 13.1213 15.8786 13.1213 16.5Z" />
                </svg>
            </span>
            Danger alert message goes here.
            <a class="o-link c-alert__link u-text-decoration--underline" href="#" target="_self">
                <span class="o-link__label">
                    Link
                </span>
            </a>
        </div>
    </div>
    <button class="o-button o-button--icon c-alert__close js-toggle" data-prefix="alert" data-toggled="body" aria-label="close">
        <span class="o-icon o-icon--md">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.2373 12L19 6.23734L17.7627 5L12 10.7627L6.23751 5L5 6.23734L10.7627 12L5 17.7627L6.23751 19L12 13.2373L17.7627 19L19 17.7627L13.2373 12Z" />
            </svg>
        </span>
    </button>
</div>
 
{% set base_class = alert.base_class|default('c-alert') %}

{% set alert_modifiers = [] %}
{% if alert.items|length > 1 %}
  {% set alert_modifiers = alert_modifiers|merge(['pagination']) %}
{% endif %}

{% if alert.items %}
  <div class="{{ bem(base_class, alert.element, alert_modifiers, alert.extra) }}">
    {% if alert.items|length > 1 %}
      {% include "@pagination" with {
        "pagination": {
          "modifiers": "sm",
          "items": alert.items,
          "extra": bem(base_class, 'pagination')
        }
      } %}
    {% endif %}
    <div class="{{ bem(base_class, 'items') }}">
      {% for item in alert.items %}
        {% set alert_icon = {
          'danger': 'warning',
          'warning': 'warning-circle',
          'info': 'info',
          'success': 'done-circle'
        }[item.modifiers]|default('message') %}
        <div class="{{ bem(base_class, 'item', '', (item.active or alert.items|length == 1 ? 'is-active')) }}">
          {% include "@icon" with {
            "icon": {
              "name": alert_icon,
              "modifiers": "md",
              "extra": bem(base_class, 'icon')
            }
          } %}
          {{ item.text }}
          {% include "@link" with {
            "link": {
              "url": item.link.url,
              "text": item.link.text,
              "target": item.link.target,
              "extra": [bem(base_class, 'link'), 'u-text-decoration--underline']
            }
          } %}
        </div>
      {% endfor %}
    </div>
    {% include "@button" with {
      "button": {
        "icon": {
          "name": "close",
          "modifiers": "md"
        },
        "modifiers": "icon",
        "attributes": {
          "aria-label": "close",
          "data-toggled": "body",
          "data-prefix": "alert"
        },
        "extra": [bem(base_class, 'close'), 'js-toggle']
      }
    } %}
  </div>
{% endif %}
 
{
  "alert": {
    "items": [
      {
        "text": "Alert message goes here.",
        "link": {
          "url": "#",
          "text": "Link"
        },
        "active": true
      },
      {
        "modifiers": "info",
        "text": "Info alert message goes here.",
        "link": {
          "url": "#",
          "text": "Link"
        }
      },
      {
        "modifiers": "success",
        "text": "Success alert message goes here.",
        "link": {
          "url": "#",
          "text": "Link"
        }
      },
      {
        "modifiers": "warning",
        "text": "Warning alert message goes here.",
        "link": {
          "url": "#",
          "text": "Link"
        }
      },
      {
        "modifiers": "danger",
        "text": "Danger alert message goes here.",
        "link": {
          "url": "#",
          "text": "Link"
        }
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------ *\
  $ALERT
\* ------------------------------------ */

.c-alert {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 0;
  padding: var(--dotd-space) var(--dotd-space-super) var(--dotd-space) var(--dotd-space-lg);
  background-color: var(--dotd-color-background-primary-default);
  color: var(--dotd-color-content-primary-weak);
  height: auto;
  min-height: var(--dotd-layout-height-alert);

  @include media(">medium") {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--dotd-space-lg);
    padding: 0 var(--dotd-space) 0 var(--dotd-space-lg);
  }

  &--pagination {
    @include media("<=medium") {
      padding-top: var(--dotd-space-xs);
    }
  }

  &__pagination {
    position: relative;
    left: calc(var(--dotd-space-sm) * -1);
  }

  &__items {
    flex: 1;
  }

  &__item {
    display: none;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--dotd-space-sm);

    &.is-active {
      display: flex;
    }
  }

  &__close {
    @include media("<=medium") {
      position: absolute;
      top: var(--dotd-space-xxs);
      right: var(--dotd-space);
    }
  }

  .o-link,
  .o-button {
    color: var(--dotd-color-content-primary-weak);
    background-color: transparent;
    border-color: transparent;

    &:focus,
    &:hover:not(:disabled) {
      color: var(--dotd-color-content-primary-weak);
    }
  }
}

body.alert-is-active {
  .c-alert {
    display: none;
  }
}
  • URL: /components/raw/alert/_alert.scss
  • Filesystem Path: components/02-molecules/alert/_alert.scss
  • Size: 1.6 KB

No notes defined.