DOTD Component Library

Alert: Default 

<div class="c-alert">
    <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>
    <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"
        }
      }
    ]
  }
}
  • 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.