Block Messages

Provide feedback for successful interactions, errors, important information, and warnings.

Success

Confirm successful completion of an action – like Save, Edit, or Submit – with a Success message.

<div class="comet-block-message comet-block-message--success" role="alert">
    <div class="comet-block-message__icon-box">
        <svg class="comet-block-message__icon" aria-labelledby="title">
            <title>badge-correct</title>
            <use xlink:href="/comet/comet_assets/comet.svg#badge-correct"></use>
        </svg>
    </div>
    <div class="comet-block-message__content comet-long-form-text">
        <p>Your profile has been saved.</p>
    </div>
</div>
                
{{ comet.block_message(type="success", content="Your profile has been saved.") }}
                
Macro params reference

Warning

Direct attention to something undesirable that may occur using a warning message.

<div class="comet-block-message comet-block-message--warning" role="alert">
    <div class="comet-block-message__icon-box">
        <svg class="comet-block-message__icon" aria-labelledby="title">
            <title>message-warning</title>
            <use xlink:href="/comet/comet_assets/comet.svg#message-warning"></use>
        </svg>
    </div>
    <div class="comet-block-message__content comet-long-form-text">
        <p>You haven't attached any resources. Resources are optional but create a stronger assessment.</p>
    </div>
</div>
                
{{ comet.block_message(type="warning", content="You haven't attached any resources. Resources are optional but create a stronger assessment.") }}
                
Macro params reference

Error

Highlight something that went wrong – like an error, invalid entry, missing fields, or an incorrect answer – using an error message.

<div class="comet-block-message comet-block-message--error" role="alert">
    <div class="comet-block-message__icon-box">
        <svg class="comet-block-message__icon" aria-labelledby="title">
            <title>message-error</title>
            <use xlink:href="/comet/comet_assets/comet.svg#message-error"></use>
        </svg>
    </div>
    <div class="comet-block-message__content comet-long-form-text">
        <p>Username or password is incorrect.</p>
    </div>
</div>
                
{{ comet.block_message(type="error", content="Username or password is incorrect.") }}
                
Macro params reference

Informational

Convey additional informative messages – such as a helpful tip – that does not warrant immediate action using an informational message.

<div class="comet-block-message comet-block-message--informational" role="alert">
    <div class="comet-block-message__icon-box">
        <svg class="comet-block-message__icon" aria-labelledby="title">
            <title>message-information</title>
            <use xlink:href="/comet/comet_assets/comet.svg#message-information"></use>
        </svg>
    </div>
    <div class="comet-block-message__content comet-long-form-text">
        <p>Students can only complete this assessment once and may not take it across multiple sittings.</p>
    </div>
</div>
                
{{ comet.block_message(type="informational", content="Students can only complete this assessment once and may not take it across multiple sittings.") }}
                
Macro params reference

Device Rotate

Inform the user that their device is in the wrong orientation with a Device Rotate Block Message.

  • Never display in cases where rotating a device will not result in a proper display.
<div class="comet-block-message comet-block-message--device-rotate" role="alert">
    <div class="comet-block-message__icon-box">
        <svg class="comet-block-message__icon" aria-labelledby="title">
            <title>device-rotate</title>
            <use xlink:href="/comet/comet_assets/comet.svg#device-rotate"></use>
        </svg>
    </div>
    <div class="comet-block-message__content comet-long-form-text">
        <p>This interactive is not optimized for this resolution. Rotate your device to landscape orientation or add it to your quicklist to view later on a desktop.</p>
    </div>
</div>
                
{{ comet.block_message(type="device-rotate", content="This interactive is not optimized for this resolution. Rotate your device to landscape orientation or add it to your quicklist to view later on a desktop.") }}
                
Macro params reference

With Button

A Block Message With Button displays a primary action for a user to take following message text.

<div class="comet-block-message comet-block-message--success" role="alert">
    <div class="comet-block-message__icon-box">
        <svg class="comet-block-message__icon" aria-labelledby="title">
            <title>badge-correct</title>
            <use xlink:href="/comet/comet_assets/comet.svg#badge-correct"></use>
        </svg>
    </div>
    <div class="comet-block-message__content comet-long-form-text">
        <p>Your profile has been saved.</p>
    </div>
    <a class="comet-button comet-button--primary comet-button--small" href="http://www.google.com">
        View Profile
    </a>
</div>
                
{{ comet.block_message(type="success", content="Your profile has been saved.", cta_text="View Profile", cta_link="http://www.google.com") }}
                
Macro params reference

Custom Messages

For more complex messages, use the call macro to include custom in a wrapper for content other than level-4-headings and

tags.

<div class="comet-block-message comet-block-message--error" role="alert">
    <div class="comet-block-message__icon-box">
        <svg class="comet-block-message__icon" aria-labelledby="title">
            <title>message-error</title>
            <use xlink:href="/comet/comet_assets/comet.svg#message-error"></use>
        </svg>
    </div>
    <div class="comet-block-message__content comet-long-form-text">
        <h4>You missed some required fields.</h4>
        <ul>
            <li>Title is required.</li>
            <li>Grade is required</li>
        </ul>
    </div>
</div>
                
{% call comet.block_message(type="error") %}
    <h4>You missed some required fields.</h4>
    <ul>
        <li>Title is required.</li>
        <li>Grade is required</li>
    </ul>
{% endcall %}
                
Macro params reference

Guidelines

  • Never display multiple block message variations at once.
  • Do Image

    use a single block message to provide user feedback.

  • Do Image

    use a mixture of success, warning, and error block messages that may result in a confusing experience.

  • Never use a block message as “toast” or “growl” pattern messages.

Editorial

  • Limit block message content to 280 characters or less.
  • Use friendly, conversational language.
  • Avoid jargon and language that sounds like a robot or computer speaking.

Class Reference

Class Applies to Outcome

.comet-block-message

<div>

Initializes an element to contain base block message styles. Must be paired with a variation.

.comet-block-message--informational

.comet-block-message

Displays informational theme for message.

.comet-block-message--warning

.comet-block-message

Displays warning theme for message.

.comet-block-message--error

.comet-block-message

Displays error theme for message.

.comet-block-message--success

.comet-block-message

Displays success theme for message.

.comet-block-message--device-rotate

.comet-block-message

Displays device-rotate theme for message.

Macro Params Reference

Param Default Values Description

cta_link

False

String

The location of the link for the button

cta_text

False

String

The text to be displayed in the button, button will not display if false

class

False

String

Additional classes added to the block message

content

False

String

The content to be displayed inside of a p tag in the block message

header

False

String

The content to be displayed inside of an h4 in the block message

icon_path

False

String

Allows the definition of an icon path for custom icons.

type

informational

informational, success, warning, error, device-rotate

Sets the type of message.