# Typographic Patterns

# Contact

[![pattern-contact.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-contact.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-contact.png)

<table id="bkmrk-use-case-when-you-wa"><tbody><tr><td>**Use Case**

</td><td><span style="font-weight: 300;">When you want to share contact information for a person or office</span>

</td></tr><tr><td>**Limitations**

</td><td><span style="font-weight: 300;">N/A</span>

</td></tr><tr><td>**What’s Required?**

</td><td><span style="font-weight: 300;">The eyebrow, section heading, introduction, and button are all required</span>

</td></tr><tr><td>**What’s optional?**

</td><td><span style="font-weight: 300;">Phone number</span>

</td></tr></tbody></table>

# CTA Bar

[![pattern-cta-bar.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-cta-bar.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-cta-bar.png)

<table id="bkmrk-use-case-when-you-wa"><tbody><tr><td>**Use Case**

</td><td><span style="font-weight: 300;">When you want to link to 1 or more places side-by-side to each other</span>

</td></tr><tr><td>**Limitations**

</td><td><span style="font-weight: 300;">N/A</span>

</td></tr><tr><td>**What’s Required?**

</td><td><span style="font-weight: 300;">There must be a section heading, introduction, and at least one primary button</span>

</td></tr><tr><td>**What’s optional?**

</td><td><span style="font-weight: 300;">1 additional primary button and 2 secondary buttons are optional</span>

</td></tr></tbody></table>

# Outcomes Feature

[![pattern-outcomes.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-outcomes.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-outcomes.png)

<table id="bkmrk-use-case-when-you-wa" style="height: 187px;"><tbody><tr style="height: 57px;"><td style="height: 57px; width: 143px;">**Use Case**

</td><td style="height: 57px; width: 665px;"><span style="font-weight: 300;">When you want to feature a quote alongside a bit of featured text. This is especially helpful for sharing job outcomes</span>

</td></tr><tr style="height: 35px;"><td style="height: 35px; width: 143px;">**Limitations**

</td><td style="height: 35px; width: 665px;"><span style="font-weight: 300;">N/A</span>

</td></tr><tr style="height: 57px;"><td style="height: 57px; width: 143px;">**What’s Required?**

</td><td style="height: 57px; width: 665px;"><span style="font-weight: 300;">All fields are required (other than what is listed below). This includes all text fields and images for the quote, as well as the background image</span>

</td></tr><tr style="height: 38px;"><td style="height: 38px; width: 143px;">**What’s optional?**

</td><td style="height: 38px; width: 665px;"><span style="font-weight: 300;">Introduction</span>

</td></tr></tbody></table>

# Quote

[![pattern-quote.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-quote.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-quote.png)

<table id="bkmrk-use-case-when-you-wa"><tbody><tr><td>**Use Case**

</td><td><span style="font-weight: 300;">When you want to share a quote without an image</span>

</td></tr><tr><td>**Limitations**

</td><td><span style="font-weight: 300;">N/A</span>

</td></tr><tr><td>**What’s Required?**

</td><td><span style="font-weight: 300;">The quote text is required</span>

</td></tr><tr><td>**What’s optional?**

</td><td><span style="font-weight: 300;">Section heading, introduction, attribution</span>

</td></tr></tbody></table>

# Statistics

[![pattern-statistics.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-statistics.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-statistics.png)

<table id="bkmrk-use-case-when-you-wa"><tbody><tr><td>**Use Case**

</td><td><span style="font-weight: 300;">When you want to highlight number-focused information</span>

</td></tr><tr><td>**Limitations**

</td><td><span style="font-weight: 300;">All statistics must start with a number or numeric value followed by textual context.</span>

</td></tr><tr><td>**What’s Required?**

</td><td><span style="font-weight: 300;">There must be 3 statistics. Each statistic must have a number and a caption.</span>

</td></tr><tr><td>**What’s optional?**

</td><td><span style="font-weight: 300;">Section heading, introduction, and CTAs for each statistic</span>

</td></tr></tbody></table>

# Stats + Photo

[![pattern-stats-photo.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-stats-photo.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-stats-photo.png)

<table id="bkmrk-use-case-when-you-wa"><tbody><tr><td>**Use Case**

</td><td><span style="font-weight: 300;">When you want to feature 3 stats along with one image</span>

</td></tr><tr><td>**Limitations**

</td><td><span style="font-weight: 300;">N/A</span>

</td></tr><tr><td>**What’s Required?**

</td><td><span style="font-weight: 300;">There must be a section heading, introduction, photo, and 3 stats</span>

</td></tr><tr><td>**What’s optional?**

</td><td><span style="font-weight: 300;">Introduction</span>

</td></tr></tbody></table>