Alert

Design File

Figma link

Introduction

This is the custom alert component for the Libraries. It updates the typography, layout spacing, and button to ensure consistency with the overall design system.

Component Structure

The alert component consists of a title, an optional description, and an optional emphasized link. It is designed to provide important information or announcements to users in a clear and visually appealing manner.

Variants

There are two variants: In-Page Alert and Site-Wide Alert.

1. In-Page Alert

This is the default variant of the alert component. It is designed for use at the page level, typically at the top of the page under the hero section or the page title, to provide important information or announcements related to that page.

2. Site-Wide Alert

This variant is used for site-wide announcements or alerts that need to be displayed prominently across multiple pages. It is typically placed at the top of the page, above the hero section and below the navigation, to ensure visibility. This variant provides link functionality for linking to a specific page, as well as a button to close the alert.

Props

Field	Data Type	Requirement	Description	Note
Heading Level	String	Optional	The HTML heading level for the alert title.	In-Page variant only. Options: h2–h6. Defaults to h2.
Component ID	String	Optional	An ID for the component, useful for in-page anchor linking.

Slots

Field	Data Type	Requirement	Description	Note
Alert Title	String	Required	The title of the alert.	Recommended to limit to 100 characters for optimal display.
Alert Description	WYSIWYG	Optional	Additional descriptive content for the alert.
Link Text	String	Conditional	Text for the emphasized link.	Required if Link URL is used.
Link URL	String	Conditional	URL for the emphasized link.	Required if Link Text is used.

Embedded Components

[Component] UMD Lib Emphasized Link

The UMD Lib Emphasized Link is used to provide users with more information regarding the alert information. It follows all constraints and styles defined in the UMD Lib Emphasized Link component.