Call to Action Link Component
The Call to Action Link component gives site creators the ability to add an eye-catching link to the page. These links are meant to entice users to take an action, such as applying, visiting, donating, or requesting information, among other uses.
The link can be styled in various different ways based on the selected properties:
<div class="parbase section vtctalink">
<a class="vt-button orange btn-shadow uppercase" href="/content/vt_edu/en/about">Apply now</a>
The Call to Action Link gives site creators the ability to add an eye-catching link to the page. These links are meant to entice users to take an action, such as applying, visiting, donating, or requesting information, among other uses.
- Custom link text
- Design options including placement, color, style, font, etc.
- Custom accessible label
Title and Options
Component Title- Title of Component
CSS Class- CSS class to be applied to the component
Link Text- The display text of the link
Accessible Link Text- Text that will only be available to a screen reader. Useful if link text needs to be something like "Learn more"
Link URL- The url for the link
Link Style- The general style theme of the link
Filled- A solid fill background color
Outline- A strong, colored border and text, but no background color
Color choices- There are several color options
Alignment- Snaps the link to a certain position
Left- align link to the left edge of the row
Center- align link to the center of the row
Right- align link to the right edge of the row
Inline- link will flow with other elements on the same line
Font Family- Several font choices are available
Gineso Condensed- Condensed sans-serif
Acherus Grotesque- Normal sans-serif
Crimson Text- Normal serif
Opacity- The translucence of the link, measured in percentages
60%- 60% visible
70%- 70% visible
80%- 80% visible
90%- 90% visible