<p class="t4_button">
<a href="https://compass.vcu.edu/">Documentation</a>
</p>
{% if element == 'button' %}
{% if environment == 't4' %}
<p class="t4_button">
<button>{{ text }}</button>
</p>
{% else %}
<button class="cwf-button">{{ text }}</button>
{% endif %}
{% elseif element == 'link' %}
{% if environment == 't4' %}
<p class="t4_button">
<a href="{{ href }}">{{ text }}</a>
</p>
{% else %}
<a class="cwf-button" href="{{ href }}">{{ text }}</a>
{% endif %}
{% elseif element == 'input' %}
{% if environment == 't4' %}
<p class="t4_button">
<input type="{{ type }}" {{ value ? 'value="' ~ value ~ '"' }} />
</p>
{% else %}
<input type="{{ type }}"
{{ value ? 'value="' ~ value ~ '"' }}
class="cwf-button" />
{% endif %}
{% endif %}
{
"element": "link",
"environment": "t4",
"href": "https://compass.vcu.edu/",
"text": "Documentation"
}
// Button component styles
@use "../../shared/animation";
@use "../../shared/style";
@use "../../shared/theme";
// Selector prefix
$prefix: "cwf" !default;
// Button colors
$background-color: style.color("blue", "accent") !default;
$border-color: style.lighten(
style.color("blue", "accent"),
24%
) !default; // #00a4eb
$color: style.color("white") !default;
// Active button colors
$background-color--active: style.darken(
style.color("blue", "accent"),
24%
) !default; // #004f70
$color--active: style.color("white") !default;
// Button interaction colors
$background-color--interact: style.lighten(
style.color("blue", "accent"),
24%
) !default; // #00a4eb
$color--interact: style.color("gray-dark") !default;
%button-properties {
--cwf-button--background-color: #{$background-color};
--cwf-button--border-color: #{$border-color};
--cwf-button--color: #{$color};
--cwf-button--active--background-color: #{$background-color--active};
--cwf-button--active--color: #{$color--active};
--cwf-button--hover-focus--background-color: #{$background-color--interact};
--cwf-button--hover-focus--color: #{$color--interact};
}
%button-styles {
display: inline-block;
user-select: none;
border-radius: 1.5rem;
padding: 0.5rem 1rem;
border: 1px solid var(--cwf-button--border-color);
background-color: var(--cwf-button--background-color) !important;
line-height: 1.5;
font-family: theme.font--sans-serif();
font-weight: 700;
text-decoration: none;
color: var(--cwf-button--color) !important;
@include animation.transition(background-color, color);
&:active {
background-color: var(
--cwf-button--active--background-color
) !important;
color: var(--cwf-button--active--color) !important;
}
&:focus,
&:hover {
background-color: var(
--cwf-button--hover-focus--background-color
) !important;
color: var(--cwf-button--hover-focus--color) !important;
}
}
.t4_button {
@extend %button-properties;
a,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
@extend %button-styles;
}
}
.#{$prefix}-button {
@extend %button-properties;
@extend %button-styles;
}
The button component displays HTML links, buttons, and inputs into prominent, call-to-action, interactable elements.
Button components should be used when a regular link, button, or input needs to be more visually prominent in order to gain a user’s attention or convey importance compared to surrounding, interactable elements.
To convert a link, button, or input into a button, add a .cwf-button class to it. When in the T4 WYSIWYG editor, highlight the link or button you want to convert into a button, and select Format -> Formats -> t4_button; This will wrap the interactable element in a .t4_button element, which has the same desired effect.
Buttons are relatively large and pill-shaped, with a blue background, lighter blue border, and white text. When hovered, the text will turn a dark gray and the background will shift to a lighter blue. There are no variations or layout optins.
--cwf-button--background-color - The button’s background color (default #006894).--cwf-button--border-color - The button’s border color (default #00a5eb).--cwf-button--color - The button’s text color (default #fff).--cwf-button--active--background-color - The button’s active background color (default #004f70).--cwf-button--active--color - The button’s active text color (default #fff).--cwf-button--hover-focus--background-color - The button’s hover/focus background color (default #00a5eb).--cwf-button--hover-focus--color - The button’s hover/focus text color (default #333).There is no button-specific Javascript included.
The button component is not tied to a specific content type, and both the .cwf-button and .t4_button classes are automatically included in the Compass T4 page layout. It is advised to us the T4-specific class when working within a T4 WYSIWYG editor.