Design Garden: Text With Background

DESIGN GARDEN

Text On Background

This element serves as a banner, page divider, or an alternative, and decorative, text field


Post-Content Additional Info

Add additional content information with design

Sample Text With Background: UA Social Media Site
(Not at Full Width, to preserve page format)

#BEARDOWN

If you don't see your social media channel below or would like to update the information, let our team know!

The social media team collaborates with fellow Wildcat students, faculty, alumni, staff and campus organizations, covering everything from athletic events, research conducted on campus, lecture series and student spotlights, all while ensuring best practices using these guidelines and policies. 

VIEW GUIDELINES & POLICIES

For more information on how to use social media across campus, visit the documentation here.

Text with background 1 (top)

SETTING SELECTION
Full Width Toggled OFF
Background Color Arizona Blue
Background Pattern None
Space around content 5 (3.0rem | ~48px)
Text <text>

Text with background 2 (bottom)

SETTING SELECTION
Full Width Toggled OFF
Background Color Cool Gray
Background Pattern None
Space around content 5 (3.0rem | ~48px)
Text <text>

Using two Text with Background together

Try various looks by mixing two text with background

Sample Text With Background: UA Facultyaffairs Site
(Not at Full Width, to preserve page format)

Our Mission

Our mission in Faculty Affairs is to cultivate and connect institutional structures for faculty advancement across the career lifespan in alignment with the overarching mission and role of the University of Arizona. We take an ecosystem equity approach that considers (1) recruitment, (2) professional advancement, (3) retention, and (4) policies. 

              Our Vision

We aspire to maintain high levels of accountability, efficiency, and transparency in all areas of faculty affairs. We adhere to the fundamental values of our land grant institution and R1 status. We believe that a humanistic approach to faculty activity will foster excellence, equity, and impact. 

Text with background 1 (top)

SETTING SELECTION
Full Width Toggled OFF
Background Color Gray 100
Background Pattern Triangles Left
Space around content 3 (1.0rem | ~16px)
Text Text + Bootstrap Grid + Text link :Button style (Button Outline Blue)

Text with background 2 (bottom)

SETTING SELECTION
Full Width Toggled OFF
Background Color Gray 100
Background Pattern Triangles right
Space around content 2 (0.5rem | ~8px)
Text Bootstrap Grid + Text

Emphasized Numbers

Directs attention to enlarged numbers (usually statistics) and a corresponding description

Sample Text With Background Modeled After UA CAPLA Site
(Not at Full Width, to preserve page format)

#2

Lorem ipsum dolor sit amet
consectetur adipiscing elit

17

Duis vehicula tincidunt euismod
Vestibulum scelerisque

#1

Lectus diam, et condimentum
tortor imperdiet eu

In non condimentum ligula