# A-State Website - Pattern Library

This library contains descriptions and visual examples of the patterns available to use on the website

# Visual Pattern

# Carousel

[![carousel.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/carousel.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/carousel.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 slides of multiple images on one page.</span>

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

</td><td><span style="font-weight: 300;">There must be 3 to 10 slides.</span>

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

</td><td><span style="font-weight: 300;">Each slide must have an image and caption.</span>

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

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

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

# Image

[![pattern-image.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-image.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-image.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 single 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 one image</span>

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

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

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

# Image List

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

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

</td><td style="width: 611px;"><span style="font-weight: 300;">When you want to share a list of related or equally important items in a more visual way. There can be an unlimited number of items in this list.</span>

</td></tr><tr><td style="width: 126px;">**Limitations**

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

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

</td><td style="width: 611px;"><span style="font-weight: 300;">Each item in the list must have an image, title, and body.</span>

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

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

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

# Photo Collage

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

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

</td><td style="width: 654px;"><span style="font-weight: 300;">When you want to share 3 images along with important links to other content</span>

</td></tr><tr><td style="width: 140px;">**Limitations**

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

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

</td><td style="width: 654px;"><span style="font-weight: 300;">There must be a section heading, introduction, 1 primary and up to 5 secondary links, and 3 images</span>

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

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

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

# Story Display

[![pattern-story-display.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-story-display.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-story-display.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 display a quote from a student, alum, faculty member, community member, etc.</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 quote, name, and attribution.</span>

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

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

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

# Video

[![pattern-video.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-video.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-video.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 single video</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 one video</span>

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

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

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

# Organizational Patterns

# 2 Column

[![pattern-2column.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-2column.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-2column.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 two items that are related or equally important in a 2 column layout.</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 2 columns, and each column must have a title.</span>

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

</td><td><span style="font-weight: 300;">Images, subtitles, section heading, and introduction</span>

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

# 3 Column

[![pattern-3column.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-3column.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-3column.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 three items that are related or equally important in a 3 column layout.</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 3 columns, and each column must have a title.</span>

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

</td><td><span style="font-weight: 300;">Images, subtitles, section heading, and introduction</span>

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

# Accordion

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

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

</td><td style="width: 664px;"><span style="font-weight: 300;">When you want to share large amounts of information in one consolidated place, and want to hide items under recognizable labels. There can be an unlimited number of accordion sections.</span>

</td></tr><tr><td style="width: 145px;">**Limitations**

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

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

</td><td style="width: 664px;"><span style="font-weight: 300;">Each accordion section must have a title and a body.</span>

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

</td><td style="width: 664px;"><span style="font-weight: 300;">Section heading and introduction</span>

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

# 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>

# Connected Patterns

# Calendar 3-Up

[![pattern-calendar_3-up.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-calendar-3-up.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-calendar-3-up.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 events. You can choose to feature events of a certain tag.</span>

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

</td><td><span style="font-weight: 300;">The events featured must be linked to an existing event on the site.</span>

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

</td><td><span style="font-weight: 300;">There must be 3 selected events.</span>

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

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

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

# Directory Embed

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

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

</td><td style="width: 660px;"><span style="font-weight: 300;">When you want to feature contact information from multiple faculty or staff. You can feature an unlimited number of directory entries.</span>

</td></tr><tr><td style="width: 149px;">**Limitations**

</td><td style="width: 660px;"><span style="font-weight: 300;">The contacts featured must be linked to existing directory entries on the site.</span>

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

</td><td style="width: 660px;"><span style="font-weight: 300;">There must be at least one directory entry.</span>

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

</td><td style="width: 660px;"><span style="font-weight: 300;">Section heading, button</span>

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

# Instagram

[![pattern-instagram.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-instagram.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-instagram.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 photos from an Instagram account.</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;">This pattern must have a section heading and be linked to an Instagram account.</span>

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

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

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

# News 3-Up

[![pattern-news_3-up.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/pattern-news-3-up.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/pattern-news-3-up.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 news/blogs articles. You can choose to feature articles of a certain tag.</span>

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

</td><td><span style="font-weight: 300;">The news items featured must be linked to an existing news item on the site.</span>

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

</td><td><span style="font-weight: 300;">There must be 3 selected news items.</span>

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

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

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