A-State Website - Pattern Library

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

Visual Pattern

Visual Pattern

Carousel

carousel.png

 

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

 

 

Visual Pattern

Image

pattern-image.png

 

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

 

 

Visual Pattern

Image List

pattern-image-list.png

 

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

 

 

Visual Pattern

Photo Collage

pattern-photo-collage.png

 

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

 

 

Visual Pattern

Story Display

pattern-story-display.png

 

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

 

 

Visual Pattern

Video

pattern-video.png

 

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

Organizational Patterns

2 Column

pattern-2column.png

 

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

 

 

Organizational Patterns

3 Column

pattern-3column.png

 

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

 

 

Organizational Patterns

Accordion

pattern-accordian.png

 

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

Typographic Patterns

Contact

pattern-contact.png

 

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

 

 

Typographic Patterns

CTA Bar

pattern-cta-bar.png

 

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

 

 

Typographic Patterns

Outcomes Feature

pattern-outcomes.png

 

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

 

 

Typographic Patterns

Quote

pattern-quote.png

 

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

 

 

Typographic Patterns

Statistics

pattern-statistics.png

 

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

 

 

Typographic Patterns

Stats + Photo

pattern-stats-photo.png

 

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

Connected Patterns

Calendar 3-Up

pattern-calendar_3-up.png

 

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

 

 

Connected Patterns

Directory Embed

pattern-directory-embed.png

 

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

 

 

Connected Patterns

Instagram

pattern-instagram.png

 

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

 

 

Connected Patterns

News 3-Up

pattern-news_3-up.png

 

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