A-State Website - Pattern Library
This library contains descriptions and visual examples of the patterns available to use on the website
Visual Pattern
Carousel
|
Use Case |
When you want to share slides of multiple images on one page. |
|
Limitations |
There must be 3 to 10 slides. |
|
What’s Required? |
Each slide must have an image and caption. |
|
What’s optional? |
Section heading, introduction |
Image
|
Use Case |
When you want to share a single image |
|
Limitations |
N/A |
|
What’s Required? |
There must be one image |
|
What’s optional? |
Section heading, introduction, caption |
Image List
|
Use Case |
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. |
|
Limitations |
N/A |
|
What’s Required? |
Each item in the list must have an image, title, and body. |
|
What’s optional? |
Section heading, introduction |
Photo Collage
|
Use Case |
When you want to share 3 images along with important links to other content |
|
Limitations |
N/A |
|
What’s Required? |
There must be a section heading, introduction, 1 primary and up to 5 secondary links, and 3 images |
|
What’s optional? |
N/A |
Story Display
|
Use Case |
When you want to display a quote from a student, alum, faculty member, community member, etc. |
|
Limitations |
N/A |
|
What’s Required? |
There must be a quote, name, and attribution. |
|
What’s optional? |
Section heading, introduction, URL, and caption |
Video
|
Use Case |
When you want to share a single video |
|
Limitations |
N/A |
|
What’s Required? |
There must be one video |
|
What’s optional? |
Section heading, introduction, caption |
Organizational Patterns
2 Column
|
Use Case |
When you want to share two items that are related or equally important in a 2 column layout. |
|
Limitations |
N/A |
|
What’s Required? |
There must be 2 columns, and each column must have a title. |
|
What’s optional? |
Images, subtitles, section heading, and introduction |
3 Column
|
Use Case |
When you want to share three items that are related or equally important in a 3 column layout. |
|
Limitations |
N/A |
|
What’s Required? |
There must be 3 columns, and each column must have a title. |
|
What’s optional? |
Images, subtitles, section heading, and introduction |
Accordion
|
Use Case |
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. |
|
Limitations |
N/A |
|
What’s Required? |
Each accordion section must have a title and a body. |
|
What’s optional? |
Section heading and introduction |
Typographic Patterns
Contact
|
Use Case |
When you want to share contact information for a person or office |
|
Limitations |
N/A |
|
What’s Required? |
The eyebrow, section heading, introduction, and button are all required |
|
What’s optional? |
Phone number |
CTA Bar
|
Use Case |
When you want to link to 1 or more places side-by-side to each other |
|
Limitations |
N/A |
|
What’s Required? |
There must be a section heading, introduction, and at least one primary button |
|
What’s optional? |
1 additional primary button and 2 secondary buttons are optional |
Outcomes Feature
|
Use Case |
When you want to feature a quote alongside a bit of featured text. This is especially helpful for sharing job outcomes |
|
Limitations |
N/A |
|
What’s Required? |
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 |
|
What’s optional? |
Introduction |
Quote
|
Use Case |
When you want to share a quote without an image |
|
Limitations |
N/A |
|
What’s Required? |
The quote text is required |
|
What’s optional? |
Section heading, introduction, attribution |
Statistics
|
Use Case |
When you want to highlight number-focused information |
|
Limitations |
All statistics must start with a number or numeric value followed by textual context. |
|
What’s Required? |
There must be 3 statistics. Each statistic must have a number and a caption. |
|
What’s optional? |
Section heading, introduction, and CTAs for each statistic |
Stats + Photo
|
Use Case |
When you want to feature 3 stats along with one image |
|
Limitations |
N/A |
|
What’s Required? |
There must be a section heading, introduction, photo, and 3 stats |
|
What’s optional? |
Introduction |
Connected Patterns
Calendar 3-Up
|
Use Case |
When you want to feature 3 events. You can choose to feature events of a certain tag. |
|
Limitations |
The events featured must be linked to an existing event on the site. |
|
What’s Required? |
There must be 3 selected events. |
|
What’s optional? |
Section heading, introduction |
Directory Embed
|
Use Case |
When you want to feature contact information from multiple faculty or staff. You can feature an unlimited number of directory entries. |
|
Limitations |
The contacts featured must be linked to existing directory entries on the site. |
|
What’s Required? |
There must be at least one directory entry. |
|
What’s optional? |
Section heading, button |
|
Use Case |
When you want to share photos from an Instagram account. |
|
Limitations |
N/A |
|
What’s Required? |
This pattern must have a section heading and be linked to an Instagram account. |
|
What’s optional? |
N/A |
News 3-Up
|
Use Case |
When you want to feature 3 news/blogs articles. You can choose to feature articles of a certain tag. |
|
Limitations |
The news items featured must be linked to an existing news item on the site. |
|
What’s Required? |
There must be 3 selected news items. |
|
What’s optional? |
Section heading, introduction |