Alert

Default alert
Error alert
Warning alert
Success alert

HTML


<div class="orc-c-alert orc-js-alert ">

  <div class="orc-c-alert__inner orc-l-container">

    <svg class="orc-c-alert__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#caution"></use>
        </svg>

    <div class="orc-c-alert__text orc-c-text-passage">This is alert text used to communicate a message to a user. It can be an info, warning, error, or success message.</div>

    <div class="orc-c-alert__actions">
      <button class="orc-c-btn orc-c-btn--small orc-c-btn--text orc-js-alert-close-trigger">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Close</span>




    </div><!--end orc-c-btn__inner-->

</button>
      <!-- end orc-c-btn -->

    </div>

  </div>
  <!--end orc-c-alert__inner-->

</div>
<!--end orc-c-alert-->

HTML


<div class="orc-c-alert orc-js-alert orc-c-alert--error">

  <div class="orc-c-alert__inner orc-l-container">

    <svg class="orc-c-alert__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#caution"></use>
        </svg>

    <div class="orc-c-alert__text orc-c-text-passage">This is alert text used to communicate a message to a user. It can be an info, warning, error, or success message.</div>

    <div class="orc-c-alert__actions">
      <button class="orc-c-btn orc-c-btn--small orc-c-btn--text orc-js-alert-close-trigger">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Close</span>




    </div><!--end orc-c-btn__inner-->

</button>
      <!-- end orc-c-btn -->

    </div>

  </div>
  <!--end orc-c-alert__inner-->

</div>
<!--end orc-c-alert-->

HTML


<div class="orc-c-alert orc-js-alert orc-c-alert--warning">

  <div class="orc-c-alert__inner orc-l-container">

    <svg class="orc-c-alert__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#caution"></use>
        </svg>

    <div class="orc-c-alert__text orc-c-text-passage">This is alert text used to communicate a message to a user. It can be an info, warning, error, or success message.</div>

    <div class="orc-c-alert__actions">
      <button class="orc-c-btn orc-c-btn--small orc-c-btn--text orc-js-alert-close-trigger">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Close</span>




    </div><!--end orc-c-btn__inner-->

</button>
      <!-- end orc-c-btn -->

    </div>

  </div>
  <!--end orc-c-alert__inner-->

</div>
<!--end orc-c-alert-->

HTML


<div class="orc-c-alert orc-js-alert orc-c-alert--success">

  <div class="orc-c-alert__inner orc-l-container">

    <svg class="orc-c-alert__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#circle-check"></use>
        </svg>

    <div class="orc-c-alert__text orc-c-text-passage">This is alert text used to communicate a message to a user. It can be an info, warning, error, or success message.</div>

    <div class="orc-c-alert__actions">
      <button class="orc-c-btn orc-c-btn--small orc-c-btn--text orc-js-alert-close-trigger">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Close</span>




    </div><!--end orc-c-btn__inner-->

</button>
      <!-- end orc-c-btn -->

    </div>

  </div>
  <!--end orc-c-alert__inner-->

</div>
<!--end orc-c-alert-->

When to use

Use in any case when there is critical information for the user, such as the confirmation of an updated profile or issues with their account that need to be addressed.

When to consider an alternative

Many error messages can be addressed within the component that the user is interacting with, such as a select field or text field. If those errors can be addressed there, it’s preferable to using an alert that may get the user overly concerned.

Class Name	Description
`orc-c-alert` Required	Apply to the alert’s containing HTML element. This provides the general layout of the alert component and uses modifiers to change styles like the background and text color.
`orc-c-alert--error` Modifier	Apply in addition to the `orc-c-alert` class to change the styling of the alert to represent an error to the user.
`orc-c-alert--warning` Modifier	Apply in addition to the `orc-c-alert` class to change the styling of the alert to represent a warning to the user.
`orc-c-alert--success` Modifier	Apply in addition to the `orc-c-alert` class to change the styling of the alert to represent success to the user.
`orc-js-alert` JS	Apply in addition to the `orc-c-alert` class to add JS functionality to the alert that removes it when the close button is selected for example.
`orc-c-alert__inner` Required	Apply to the inner `div` of the `orc-c-alert` container. This is set to `display: flex` to place content within the alert side-by-side.
`orc-l-container` Required	Apply in addition to `orc-c-alert__inner` to cap the width of the content inside to align with the rest of the content on the page.
`orc-c-alert__icon` Required	Apply to the `svg` within the alert to help the user distinguish the type of error.
`orc-c-alert__text` Required	Apply to the `div` that contains the actual message of the alert.
`orc-c-text-passage` Required	Apply in addition to the `orc-c-alert__text` to style this text like a text passage.
`orc-c-alert__actions`	Container that is used to help layout the alert close button.
`orc-c-btn`	Apply to the `button` tag within the `orc-c-alert__actions` container to represent the close button. See button for more information about classes used in this component.
`orc-js-alert-close-trigger` JS	Apply to the `orc-c-btn` class within the alert to allow JS to close the alert when this button is selected.

Default alert `orc-c-alert`

Error alert `orc-c-alert--error`

Warning alert `orc-c-alert--warning`

Success alert `orc-c-alert--success`

Usage

When to use

When to consider an alternative