We have some new utilities that allow you to style multiple elements within a component at once. In your component’s outer container, add audience-{audience}, tone-{tone}, and bg-option-{option} where {audience} can be one of general, alumni, leaders_partners, or prospective_students; {tone} can be one of default, reserved, loud, or lets-go; and {option} can be a number 1 through 8. Pick the correct combination based on your intended audience.

For example, if you have a formal event, where you want a more reserved tone use audience-alumni tone-reserved bg-option-4. Note, the audience-alumni tone corresponds to an academic/traditional audience, and can be substituted for any formal event e.g. Commencement.

Within your component, use wvu-b-display-heading for primary headings, wvu-b-subheading for subheadings, wvu-b-accent-bg for elements you want to apply an accent color to the background; wvu-b-accent-text to text elements to which you want to apply the accent color; and btn wvu-b-btn for buttons.

Color options will change based on what you select for your audience and tone. Feel free to experiment with different color options. If you are unsure which audience to target, or are trying to reach multiple audiences, use audience-general.