AFW Pattern Lab

Notice: Warning 

<div class="notice notice--warning">
    <div class="notice__wrapper">
        Proident est reprehenderit labore ullamco est et consectetur adipisicing proident ipsum cillum occaecat sit.

    </div>
</div>
 
<div class="notice{% if modifier %} notice--{{modifier}}{% endif %}{{modifierClass|lspace}}">
    <div class="notice__wrapper{% if centered %} text-center{% endif %}">
        {{message|safe}}
        {% if closeable %}
        <button>Close</button>
        {% endif %}
    </div>
</div>
 
{
  "message": "Proident est reprehenderit labore ullamco est et consectetur adipisicing proident ipsum cillum occaecat sit.",
  "closeable": false,
  "modifier": "warning"
}
  • Content: 
    .notice {
    background: $color-gray;
    border-radius: rem(4px);
    display: block;

    &__wrapper {
        padding-block: rem(16px);
        padding-inline: rem(20px);
    }

    &--success {
        background: $color-green;
        color: a11y-color($color-primary-text, $color-green);
    }

    &--warning {
        background: $color-yellow;
        color: a11y-color($color-primary-text, $color-yellow);
    }

    &--danger {
        background: $color-red;
        color: a11y-color($color-primary-text, $color-red);
    }

    @each $color, $var in $colors {
        &--#{$color} {
            background: $var;
            color: a11y-color($color-primary-text, $var);
        }
    }
}
  • URL: /components/raw/notice/notice.scss
  • Filesystem Path: source/patterns/atoms/notice/notice.scss
  • Size: 704 Bytes

No notes defined.