Dcode Design System

Alert: Info

Available classes to modify

  • .border-error-500
  • .bg-error-100
  • text-error-500

We have included four default variants:

  1. Error
  2. Info
  3. Success
  4. Warning

Where to implement

  1. An alert should sit at the top of the page or inside the main content container.

  2. To modify an alert the tailwind classes on the parent div adds the base styling of an alert.

  3. To modify an alert swap out the below classes to get your desired colour from tailwind.config.js

Working example in a page

V1 Figma Updates

<!-- Alert > Info Standard -->
<div class="alert alert--info" role="alert">
    <div class="alert__wrapper">
        <div class="alert__left">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="alert__icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
            </svg>
        </div>
        <div class="alert__center">
            <p class="alert__heading alert__heading--info">A new software update is available. See what’s new in version 2.0.4.</p>
            <p class="alert__body alert__body--info">Please check the details for more information ...</p>
        </div>
        <div class="alert__right">
            <div class="alert__button_wrapper">
                <button type="button" class="alert__button alert__button--info">
                    <span class="alert__dismiss">Dismiss</span>
                    <!-- Heroicon name: mini/x-mark -->
                    <svg class="alert__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

<br />

<!-- Alert > Info with Link -->
<div class="alert alert--info" role="alert">
    <div class="alert__wrapper">
        <div class="alert__left">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="alert__icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
            </svg>
        </div>
        <div class="alert__center alert__center--info">
            <p class="alert__body alert__body--info alert__body--no_heading">A new software update is available. See what’s new in version 2.0.4.</p>
            <p class="alert__details_wrapper">
                <a href="#" class="alert__details">
                    Details
                    <span aria-hidden="true"> &rarr;</span>
                </a>
            </p>
        </div>
    </div>
</div>
  • Content: 
    .alert {
    @apply border p-smSpace rounded-md space-x-smSpace;

    &--info {
        @apply border-info-500 bg-info-100 text-info-500;
    }

    &--success {
        @apply border-success-500 bg-success-100 text-success-500;
    }

    &--warning {
        @apply border-warning-500 bg-warning-100 text-warning-500;
    }

    &__wrapper {
        @apply flex;
    }

    &__left {
        @apply flex-shrink-0;
    }

    &__icon {
        @apply w-6 h-6;
    }

    &__center {
        @apply ml-3;

        &--info {
            @apply flex-1 md:flex md:justify-between;
        }
    }

    &__heading {
        @apply text-sm font-medium;

        &--info {
            @apply text-info-800;
        }

        &--success {
            @apply text-success-800;
        }

        &--warning {
            @apply text-warning-800;
        }
    }

    &__body {
        @apply mt-2 text-sm;

        &--no_heading {
            @apply mt-0;
        }

        &--info {
            @apply text-info-700;
        }

        &--success {
            @apply text-success-700;
        }

        &--warning {
            @apply text-warning-700;
        }
    }

    &__list {
        @apply list-disc space-y-1 pl-5;
    }

    &__right {
        @apply ml-auto pl-3;
    }

    &__button_wrapper {
        @apply -mx-1.5 -my-1.5;
    }

    &__details_wrapper {
        @apply mt-3 text-sm md:ml-6 md:mt-0;
    }

    &__details {
        @apply whitespace-nowrap font-medium text-info-700 hover:text-info-600;
    }

    &__button {
        @apply inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2;

        &--info {
            @apply bg-info-100 text-info-500 hover:bg-info-100 focus:ring-info-600 focus:ring-offset-info-50;
        }

        &--success {
            @apply bg-success-100 text-success-500 hover:bg-success-100 focus:ring-success-600 focus:ring-offset-success-50;
        }

        &--warning {
            @apply bg-warning-100 text-warning-500 hover:bg-warning-100 focus:ring-warning-600 focus:ring-offset-warning-50;
        }

    }

    &__dismiss {
        @apply sr-only;
    }

    &__close {
        @apply h-5 w-5;
    }
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: components/03-elements/alert/alert.scss
  • Size: 2.2 KB
  • Content: 
    https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJUMg9qwWNHgaiuoDoEgHkn%2Ffractal.dcodegroup.com%3Fnode-id%3D80%253A6512%26t%3DdVycvZF0V0W4lyYO-1
  • URL: /components/raw/alert/figma.txt
  • Filesystem Path: components/03-elements/alert/figma.txt
  • Size: 182 Bytes