{"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":"2024-09-18T20:31:24","modified_gmt":"2024-09-19T00:31:24","slug":"alert-block","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-2-design-block-mastery\/alert-block\/","title":{"rendered":"Alerts Block"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Alerts Block\n <\/h1>\n \n \n \n\n\n

Module 2.2 \u2013 Mastery: Design Blocks: Alerts Block<\/p>\n\n\n\n

\n
Examples: Alerts Block<\/a><\/div>\n<\/div>\n\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n\n
\n

\n Table of Contents\n <\/h2>\n
\n
\n \n
\n
\n \n 1.\n <\/span>\n\n \n Step-by-Step\n <\/a>\n <\/div>\n\n
\n \n
\n
\n \n 1.1\n <\/span>\n\n \n Alert Box Examples\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 2.\n <\/span>\n\n \n Video Tutorial\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 3.\n <\/span>\n\n \n Try it Out\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n\n\n

The alerts block is useful for highlighting an important message to your website visitors. <\/p>\n\n\n\n

Step-by-Step<\/h2>\n\n\n\n

1.<\/strong> Add the Alerts block using the block menu.<\/a><\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

2. Click the pencil icon in the block context menu to choose the type of block: Success, Error, Warning, Info. Each type of block is a different colour and has a different icon based on its purpose. (See examples of each below)<\/p>\n\n\n\n

\"Context<\/figure>\n\n\n\n

Alert Box Examples<\/h3>\n\n\n
\n\n \n <\/path>\n <\/svg>\n \n
\n

\n Success\n <\/p>\n

\n Example of a success alerts block\n <\/p>\n <\/div>\n<\/div>\n\n\n

\n\n \n <\/path>\n <\/svg>\n \n
\n

\n Error \n <\/p>\n

\n Example of an error alerts block\n <\/p>\n <\/div>\n<\/div>\n\n\n

\n\n \n <\/path>\n <\/svg>\n \n
\n

\n Warning\n <\/p>\n

\n Example of a warning alerts block\n <\/p>\n <\/div>\n<\/div>\n\n\n

\n\n \n <\/path>\n <\/svg>\n \n
\n

\n Info\n <\/p>\n

\n Example of an info alerts block\n <\/p>\n <\/div>\n<\/div>\n\n\n\n

3. Click in the title area to add a title.<\/p>\n\n\n\n

\"Title<\/figure>\n\n\n\n

4. Click in the description area to add a sentence or two. Note you can also add a hyperlink in this area to take the user to more info.<\/p>\n\n\n\n

\"Description<\/figure>\n\n\n\n

Video Tutorial<\/h2>\n\n\n\n