{"id":2135,"date":"2024-01-15T15:03:41","date_gmt":"2024-01-15T20:03:41","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=2135"},"modified":"2026-08-10T21:16:21","modified_gmt":"2026-08-11T01:16:21","slug":"alert-block","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced-training\/advanced-training-module-2-advanced-design-blocks\/alert-block\/","title":{"rendered":"Alerts Block"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Alerts Block\n                    <\/h1>\n                \n                                \n                                    \n\n<p class=\"wp-block-paragraph\">Advanced Training Module 2: Advanced Design Blocks<\/p>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\">The Alerts block is used to highlight important information and ensure visitors don&#8217;t miss critical messages. Alerts are visually distinct from the surrounding content, making them ideal for notifications, warnings, updates, and announcements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike a standard paragraph or callout, alerts use colour and icons to communicate different types of information at a glance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common uses include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Application deadlines<\/li>\n\n\n\n<li>Service interruptions<\/li>\n\n\n\n<li>Policy updates<\/li>\n\n\n\n<li>Important reminders<\/li>\n\n\n\n<li>Confirmation messages<\/li>\n\n\n\n<li>Temporary notices<\/li>\n<\/ul>\n\n\n\n<h2 id=\"when-to-use-an-alert\" class=\"wp-block-heading\">When to Use an Alert<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use an Alert block when information requires immediate attention from visitors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Important Notice<\/strong><br>Changes to website access procedures take effect on September 1.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Service Interruption<\/strong><br>Website maintenance is scheduled for Sunday from 8:00 AM to 12:00 PM.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Application Deadline<\/strong><br>Applications for the Winter term close on October 15.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Alert blocks should be reserved for information that is genuinely important. If everything is highlighted, nothing stands out.<\/p>\n\n\n\n<h2 id=\"alert-types\" class=\"wp-block-heading\">Alert Types<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Alerts block includes several styles, each with a different purpose. Choose the alert type that best matches the urgency and purpose of the message.<\/p>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    <div class=\"grid gap-6 mx-auto my-6 cu-column md:gap-10 md:grid-cols-2 md:my-10 first:mt-0\">\n        \n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"success\" class=\"wp-block-heading\">Success<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use when confirming a positive outcome or completed action.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Registration successfully submitted<\/li>\n\n\n\n<li>Application received<\/li>\n\n\n\n<li>Account activated<\/li>\n<\/ul>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"information\" class=\"wp-block-heading\">Information<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use for general information and helpful guidance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Service updates<\/li>\n\n\n\n<li>Helpful tips<\/li>\n\n\n\n<li>Additional information<\/li>\n<\/ul>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"warning\" class=\"wp-block-heading\">Warning<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use when visitors should exercise caution or take notice.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Upcoming deadline<\/li>\n\n\n\n<li>Scheduled maintenance<\/li>\n\n\n\n<li>Important policy changes<\/li>\n<\/ul>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"error\" class=\"wp-block-heading\">Error<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use when something requires immediate attention or action.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Service outage<\/li>\n\n\n\n<li>Missing information<\/li>\n\n\n\n<li>Critical issue affecting users<\/li>\n<\/ul>\n\n\n<\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"adding-an-alert-block\" class=\"wp-block-heading\">Adding an Alert Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add an Alert block:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>+<\/strong> button and search for <strong>Alert<\/strong>.<\/li>\n\n\n\n<li>Select the Alert block.<\/li>\n\n\n\n<li>Choose an alert type.<\/li>\n\n\n\n<li>Add a title.<\/li>\n\n\n\n<li>Add supporting content.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The block will automatically apply the appropriate styling and icon.<\/p>\n\n\n\n<h2 id=\"writing-effective-alerts\" class=\"wp-block-heading\">Writing Effective Alerts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A good alert should answer three questions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What happened?<\/li>\n\n\n\n<li>Why does it matter?<\/li>\n\n\n\n<li>What should the visitor do?<\/li>\n<\/ul>\n\n\n\n<h3 id=\"example\" class=\"wp-block-heading\">Example<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Scheduled Maintenance<\/strong><br>The website will be unavailable on Sunday from 8:00 AM to 12:00 PM due to system maintenance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Learn More<\/strong><br>This approach helps visitors quickly understand the message and any required action.<\/p>\n\n\n\n<h2 id=\"adding-links\" class=\"wp-block-heading\">Adding Links<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Alerts can contain hyperlinks when additional information is required.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Read the full announcement<\/li>\n\n\n\n<li>View service updates<\/li>\n\n\n\n<li>Review application requirements<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If visitors need to complete a task, ensure the next step is clearly linked.<\/p>\n\n\n\n<h2 id=\"best-practices\" class=\"wp-block-heading\">Best Practices<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Match the Alert Type to the Message<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Info<\/strong> for general information<\/li>\n\n\n\n<li><strong>Success<\/strong> for positive outcomes<\/li>\n\n\n\n<li><strong>Warning<\/strong> for cautionary notices<\/li>\n\n\n\n<li><strong>Error<\/strong> for urgent problems<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Keep Alerts Short<\/strong><br>Visitors should be able to understand the message quickly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Focus on One Message<\/strong><br>Each alert should communicate a single idea or action.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Use Alerts Sparingly<\/strong><br>Overusing alerts reduces their effectiveness and can overwhelm visitors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Remove Expired Alerts<\/strong><br>Review alerts regularly and remove messages that are no longer relevant.<\/p>\n\n\n\n<h2 id=\"common-uses\" class=\"wp-block-heading\">Common Uses<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Alerts are frequently used for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Registration deadlines<\/li>\n\n\n\n<li>Upcoming events<\/li>\n\n\n\n<li>Service interruptions<\/li>\n\n\n\n<li>Temporary notices<\/li>\n\n\n\n<li>Important updates<\/li>\n\n\n\n<li>Emergency communications<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio w-screen ml-offset-center cu-max-w-child-7xl px-4 md:px-6 lg:px-12\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"cutheme Mastery Training - Alerts\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/wSW02OcHzB4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-transcript-alerts\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 Alerts\n                <\/span>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-transcript-alerts\">\n            \n\n<p class=\"wp-block-paragraph\">Welcome to CUTheme Mastery Training, Module 2. In this video, we will cover alerts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Alerts are used for important messages on your site that you want users to see. They stand out from the background, and draw the user\u2019s attention.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To add an alert, upon up the block selection menu, and under \u201cDesign\u201d, select \u201cAlerts\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are 4 different types of alerts. You have a success, an error, a warning, and an info alert. You can choose which type fits best for your application. You can then add a header to your alert, and some body text to add more information. For the body text, you can bold, italicize, and add a link if you want.<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"try-it-out\" class=\"wp-block-heading\">Try it Out<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add an Information Alert to a page.<\/li>\n\n\n\n<li>Add a title and description.<\/li>\n\n\n\n<li>Include a link to additional information.<\/li>\n\n\n\n<li>Change the alert to a Warning alert.<\/li>\n\n\n\n<li>Change it again to an Error alert.<\/li>\n\n\n\n<li>Preview the page and compare the different styles.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Highlight important notices, warnings, updates, and announcements using visually distinctive Alert blocks.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1505,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[68],"class_list":["post-2135","page","type-page","status-publish","hentry","cu_page_type-advanced-training-module-2"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=2135"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2135\/revisions"}],"predecessor-version":[{"id":4265,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2135\/revisions\/4265"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1505"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=2135"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=2135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}