Creating Text Callouts

Author: Phil Chambers | Mar 6, 2021 Visual

Have you ever wanted to emphasize a certain part of the page? Drawing attention to important information about assignments, key deadlines, things like that?

If you are currently using bold, or just increasing the font size for these kinds of elements, then this is one is for you.

On Accessibility 

What we are talking about here are visual elements, for which most, if not all of them, will not be recognized by a screen reader. It will still read the text you type, however. Just a reminder to think about accessibility from the start!

The Style Way 

So let’s get right into it with the style attributes we’re going to use to make our callouts.

There are a lot of these in web development, but only certain ones are on the Canvas allowlist.

We’re going to use:

background

We will use this over background-color because we just want the color in this instance, but you can always come back and add more things in here instead of writing them out individually.

Things like:

	•	background-image
	•	background-position
	•	background-size
	•	background-repeat
	•	background-origin
	•	background-clip
	•	background-attachment

border-left

This is going to set up a colored border line to the left of our paragraph. You can use right, top, bottom to add others in if you want to mix and match.

color

This is going be the text color. We want to change this based on the background color we’re going to set for accessibility reasons. So whatever your background color is, you will need to use high contrast colors to make it readable.

The Classes 

As with styles, there is also a list of allowed ‘classes’ on Canvas as well. Classes are a way to classify, or annotate similar elements in the page. Normally you can give an element a class, and then go into your stylesheet and set all sorts of values for it. It’s unlikely that you will have access to this stylesheet as a designer on Canvas, so as with all of these videos, we are going to just use the predefined ones that Canvas has on their approved list.

Some quick ones you can use are:

border

This one will define the border’s appearance. We want this here to generate the border itself.

border-trbl

This one will tell Canvas where you want the border to appear. The letters after border stand for top, right, bottom, left. If you start removing them it will remove that part of the border. So border-rbl will only show a border on the right, bottom, and left. But not the top.

border-round

This one will modify the edges of the border to be slighly rounded.

Putting it together 

Here’s some code that will generate a gray background, with a 4 pixel solid dark blue line on the left. The padding will add 15 pixels of space around the top, right, bottom, and left.

<p style="background: #f9f9f9; border-left: 4px solid #1A3E9C; color: black; padding: 15px;">Your text in here</p>

Combining classes and styles 

Here’s another example using both classes and styles:

<div style="border-left: 4px solid #1A3E9C; padding-left: 10px; padding-top: 2px;"><strong>Important Reminder</strong>
<p>This assignment uses the following <strong>important information</strong>:
<p class="border border-trbl border-round" style="background: #fcfcfc; color: #000000; padding: 10px; border: 1px solid #1A3E9C;">
The information contained in this box will be a quote, or describe something, or a definition, or whatever you want to be here.</p>
</div>

With other elements 

You could also combine this with blockquote to add quotations into a seperate border box. Canvas will decrease the font-weight when using <p> tags inside of a <blockquote> element. It ends up giving it a nice visual style:

<div style="border-left: 4px solid #1A3E9C; padding-left: 10px;"><strong>Important Reminder</strong>
    <p>This assignment uses the following <strong>important information</strong>:</p>
    <blockquote class="border border-trbl border-round" style="background: #fcfcfc; color: #000000; border: 1px solid #1A3E9C;">
        <p style="padding-bottom: 10px;">The information contained in this box will be a quote, or describe something, or a definition, or whatever you want to be here.</p>
    </blockquote>
</div>

You can change it to your own institution’s colors, etc. You could modify the padding, maybe add margins if you want even more control over the spacing.