# 6. Pattern Library

<span style="font-weight: 300;">We will outline the different kinds of patterns available on the new site, and how they can be used. Use this library to help decide what patterns to use after you’ve chosen a page template.</span>

<span style="font-weight: 300;">Read on to learn about the different types of patterns or explore the </span>[**full pattern library**](https://kb.astate.edu/books/a-state-website-pattern-library "full pattern library")<span style="font-weight: 300;">.</span>

### <span style="color: #cc092f;">**Types of patterns**</span>

[**Visual patterns**](https://kb.astate.edu/books/a-state-website-pattern-library/chapter/visual-pattern)

<span style="font-weight: 300;">These patterns rely on imagery to leave an impression on users.</span>

[**Organizational patterns**](https://kb.astate.edu/books/a-state-website-pattern-library/chapter/organizational-patterns)

<span style="font-weight: 300;">These patterns focus on organizing primarily textual information to make it easy for users to understand information &amp; options.</span>

[**Typographic patterns** ](https://kb.astate.edu/books/a-state-website-pattern-library/chapter/typographic-patterns)

<span style="font-weight: 300;">These patterns focus on prioritizing &amp; presenting text on the page. </span>

[**Connected patterns** ](https://kb.astate.edu/books/a-state-website-pattern-library/chapter/connected-patterns)

<span style="font-weight: 300;">These patterns are used to share or connect with other content on the site, such as news, events, and social media.</span>

### <span style="color: #cc092f;">**How to choose a pattern**</span>

<span style="font-weight: 300;">Before adding a pattern, think about what kind of content you have:</span>

**Do you have access to high quality images or other media?**

<span style="font-weight: 300;">If yes, consider using a </span>[**visual pattern** ](https://kb.astate.edu/books/a-state-website-pattern-library/chapter/visual-pattern)<span style="font-weight: 300;">to display this content.</span>

**Do you need to share a variety or group of important information through text?**

<span style="font-weight: 300;">If yes, an </span>[**organizational pattern**](https://kb.astate.edu/books/a-state-website-pattern-library/chapter/organizational-patterns)<span style="font-weight: 300;"> would be best to display content in a clear &amp; consistent manner.</span>

**Do you have important announcements or timely information to share through text?**

<span style="font-weight: 300;">If yes, consider using a </span>[**typographic pattern** ](https://kb.astate.edu/books/a-state-website-pattern-library/chapter/typographic-patterns)<span style="font-weight: 300;">to ensure this information is highly visible and emphasized.</span>

**Are you looking to link to social media?**

<span style="font-weight: 300;">If yes, a </span>[**connected pattern**](https://kb.astate.edu/books/a-state-website-pattern-library/chapter/connected-patterns)<span style="font-weight: 300;"> may have the flexibility you need to share links.</span>

**Are you looking to share news or events?**

<span style="font-weight: 300;">If yes, some </span>[**connected patterns**](https://kb.astate.edu/books/a-state-website-pattern-library/chapter/connected-patterns)<span style="font-weight: 300;"> allow you to dynamically or manually link to that content.</span>

### <span style="color: #cc092f;">**Visual Patterns**</span>

- [<span style="font-weight: 300;">Carousel</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/carousel)
- [<span style="font-weight: 300;">Image</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/image)
- [<span style="font-weight: 300;">Image List</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/image-list)
- [<span style="font-weight: 300;">Photo Collage</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/photo-collage)
- [<span style="font-weight: 300;">Story Display</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/story-display)
- [<span style="font-weight: 300;">Video</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/video)

### <span style="color: #cc092f;">**Organizational Patterns**</span>

- [<span style="font-weight: 300;">2 Column</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/2-column)
- [<span style="font-weight: 300;">3 Column</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/3-column)
- [<span style="font-weight: 300;">Accordion</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/accordion)

### <span style="color: #cc092f;">**Typographic Patterns**</span>

- [<span style="font-weight: 300;">Contact</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/contact)
- [<span style="font-weight: 300;">CTA Bar</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/cta-bar)
- [<span style="font-weight: 300;">Outcome Feature</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/outcomes-feature)
- [<span style="font-weight: 300;">Quote</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/quote)
- [<span style="font-weight: 300;">Statistics</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/statistics)
- [<span style="font-weight: 300;">Stats + Photo</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/stats-photo)

### <span style="color: #cc092f;">**Connected Patterns**</span>

- [<span style="font-weight: 300;">Calendar 3-Up</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/calendar-3-up)
- [<span style="font-weight: 300;">Directory Embed</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/directory-embed)
- [<span style="font-weight: 300;">Instagram</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/instagram)
- [<span style="font-weight: 300;">News 3-Up</span>](https://kb.astate.edu/books/a-state-website-pattern-library/page/news-3-up)