Prominent link with customizable image.
Last reviewed: May 17, 2022
This component has two tabs: Button Link and Advanced.
It can be placed in the page header, main body or in the right sidebar. It can also be used on a homepage. When it is first placed on the page, the default "Learn more" text is displayed, in a gray box.
Click the wrench icon to 'configure' these settings.
Note: the Button component uses CSS3 and may look slightly different depending on the Web browser being used.
Button Text - Type the wording you want displayed on your button (Learn More is the default text).
Additional Label Text - Allows for a longer description to assist screen readers to give more context for repetitive buttons on the same page.
Link - Enter a URL here to turn the title into a clickable hyperlink. Use the magnifying glass to browse for a target page within the UBCMS.
Open in new window - This optional setting forces the clicked link to open in a new browser tab or window.
The Advanced tab allows you to customize the component by choosing the width and color.
Width - Choose from:
Button Color - Choose from:
** Yellow was added for use in emergency communications, to supplement the Issues Advisory Banner.
Note: An older version of this component had settings for shapes and text alignment, but these will be ignored if present.
This setting (e.g. in Call to Action and Button components) assists screen readers by giving more context for links with repetitive occurrence on the page. That is, if you have a page with several identically labeled links (e.g. ‘email’ links in a series of employee profiles, where brevity and repetition are desirable), the screen reader will apply the additional text to clarify the difference between these otherwise identically labelled links.
Best practice: decide on a consistent pattern that is easy for multiple people to reproduce and curate over time.
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions: