This is a visually pleasing and easy to understand callout.
The callout box module of Zuse create includes many options which allow it to be used for many different purposes. When designing callout box modules, usability and maintainability concerns require us to be careful about how we use the callout box.
What to consider when using callouts
- Is there a reason you are highlighting the content that you are putting in the callout? When designing pages, we want the content to inform the design. There should be a reason you use a particular design element besides how it looks. That way, design can increase the usability of the page and make it easier for visitors to find the information they are looking for. We only want to highlight information on a page if there is a reason. Then, the callout box (and other features) remain meaningful.
- Can someone who has never been to our site before understand how they work? People should not have to figure out how to use our website. It should be obvious based on the visual clues.
- Are you using the callout as it was meant to be used? It is important to use callout boxes (and all the features in Zuse) the way the were intended to be used because when the web team makes updates to the system we assume that the features are being used for the purposes we meant them to be used for.
Examples of effective callouts
Here are some examples of ways callout boxes are used on our sites and ways they can be improved.
Use a button for a link
Although you can use the heading of the callout as a link, it is more obvious to users on your site that there is a link associated with the text if you use a button. To make it easy to understand how to use the site, use a button for the link.
Instead of : 
Use: 
Using a callout as a heading
The callout was not designed to be used as a heading, and there is no guarantee that in further iterations of the look and feel it will make sense used as a heading. Instead of using a callout, use a heading in a rich text module or a heading module.
Instead of: 
Use a heading: 
Using a callout solely for a visual highlight
Avoid using a callout just to create visual interest on the page. You should only put text in a callout that you mean to call out for some reason. Make sure you can explain why the text that is in the callout is in the callout and the text that is not is not. In general, callouts should always include either a heading or a button.
Instead of: 
Use rich text modules:
Using a callout without context
Callouts should contain more than just headings. Add some text to your callout to explain the link. If you use a button, it can work well to build a callout without a heading.
Instead of: 
Include more context: 