Comet Block Messages

Success

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

Your profile has been saved.

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<div class="comet-block-message comet-block-message--success">
    <div class="comet-block-message__icon-box">
        <svg class="comet-block-message__icon" aria-hidden="true" focusable="false">
            <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>

Copy to Clipboard Press Ctrl + C to copy

{{ 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.

You have not attached any resources. Resources are optional but create a stronger assessment.

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<div class="comet-block-message comet-block-message--warning">
    <div class="comet-block-message__icon-box">
        <svg class="comet-block-message__icon" aria-hidden="true" focusable="false">
            <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 have not attached any resources. Resources are optional but create a stronger assessment.</p>
    </div>
</div>

Copy to Clipboard Press Ctrl + C to copy

{{ comet.block_message(type="warning", content="You have not 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.

Username or password is incorrect.

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<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-hidden="true" focusable="false">
            <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>

Copy to Clipboard Press Ctrl + C to copy

{{ 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.

Students can only complete this assessment once and may not take it across multiple sittings.

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<div class="comet-block-message comet-block-message--informational">
    <div class="comet-block-message__icon-box">
        <svg class="comet-block-message__icon" aria-hidden="true" focusable="false">
            <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>

Copy to Clipboard Press Ctrl + C to copy

{{ 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.

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.

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<div class="comet-block-message comet-block-message--device-rotate">
    <div class="comet-block-message__icon-box">
        <svg class="comet-block-message__icon" aria-hidden="true" focusable="false">
            <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>

Copy to Clipboard Press Ctrl + C to copy

{{ 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.

Your profile has been saved.

View Profile

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<div class="comet-block-message comet-block-message--success">
    <div class="comet-block-message__icon-box">
        <svg class="comet-block-message__icon" aria-hidden="true" focusable="false">
            <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" role="button" href="http://www.google.com">
        View Profile
    </a>
</div>

Copy to Clipboard Press Ctrl + C to copy

{{ 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.

You missed some required fields.

Title is required.
Grade is required

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<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-hidden="true" focusable="false">
            <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>

Copy to Clipboard Press Ctrl + C to copy

{% 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.

use a single block message to provide user feedback.
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.