Close MenuClose
Close Menu

Component Library

Testing intro text

Type Styles


Below are the typographic styles available when working with text. Many components have preset typographic styles that can serve as a good reference when setting headlines, subheadlines, body text, or captions.

 

 


Heading 1


Heading 2


Heading 3


Heading 4


Heading 5

Heading 6

 

 

 

Hero


This Hero is reserved for special instances such as the main university homepage and college landing pages. Its component include a Title, Subtitle, Body Text, Image, and Links. It functions as a large component that can be used at the top of a page to grab the viewer's attention when they first navigate to the page. Headlines should not exceed 80 characters and subheads should not exceed 380 characters.

Sample Title Goes Here Subtitle Goes Here

Fusce laoreet vitae velit vel iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque aliquam varius volutpat. Morbi pharetra, lacus vitae scelerisque egestas, dolor velit sollicitudin purus, vitae tincidunt orci lorem vel sapien.
test

Featured Content


This component allows a large amount of news and events to be featured in interesting ways. One featured story remains in the center while a left column shows headlines and preview images while the far right column allows space for a list of numbered headlines.

Two Column: Title and Action Links


These two column components allow for two link buttons and can appear in four different color profiles: Blue, Light Blue, Dark Blue, and White, as shown below.

Title Field

Qui officia deserunt mollit anim id est laborum. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

  • test 1
  • test 2
  • test 3

More text. Qui officia deserunt mollit anim id est laborum. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

Title Field

Qui officia deserunt mollit anim id est laborum. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

  • test 1
  • test 2
  • test 3

Qui officia deserunt mollit anim id est laborum. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

  • test 1
  • test 2
  • test 3

Title Field

Qui officia deserunt mollit anim id est laborum. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

  • test 1
  • test 2
  • test 3

Qui officia deserunt mollit anim id est laborum. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

  • test 1
  • test 2
  • test 3

Title Field

Qui officia deserunt mollit anim id est laborum. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

  • test 1
  • test 2
  • test 3

Qui officia deserunt mollit anim id est laborum. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

  • test 1
  • test 2
  • test 3

Two Column: Billboard


This component features two columns of image and text.

Sample Billboard Intro Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id interdum elit. Aenean condimentum urna tortor, ac dignissim lacus tincidunt finibus. Nam volutpat vel nulla in molestie.
SSS Students Billboard

Billboard 1 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id interdum elit. Aenean condimentum urna tortor, ac dignissim lacus tincidunt finibus. Nam volutpat vel nulla in molestie.

Two Column: Left/Right

 


This component features two columns. The left featuring text and the right featuring a video player. There are two color profiles to choose from: White and Light Blue.

Two Column Left/Right Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ullamcorper metus et pharetra. In hac habitasse platea dictumst. Mauris non convallis orci.

Two Column Left/Right Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ullamcorper metus et pharetra. In hac habitasse platea dictumst. Mauris non convallis orci.

 

Two Column: Contact Block


This component features a two column contact block.

Sample Two-Column Contact

Fusce laoreet vitae velit vel iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque aliquam varius volutpat. Morbi pharetra, lacus vitae scelerisque egestas, dolor velit sollicitudin purus, vitae tincidunt orci lorem vel sapien.

Contact Title Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ullamcorper metus et pharetra. Proin tempus sem ligula, sit amet hendrerit libero posuere quis. Nulla egestas massa ut erat mattis, at vehicula lectus vestibulum. Suspendisse sit amet diam lacus. 


Two Column: Text with Image

This component features a title, body text, and image. Titles should not exceed 50 characters and body text should not exceed 300 characters. 

Two Column Text With Image

Donec eu nibh vel nisl rhoncus gravida. Fusce tempor ipsum sed orci feugiat finibus. Vivamus sollicitudin urna ante, a viverra magna mattis vitae. Duis convallis augue sit amet tortor sollicitudin interdum. Sed pharetra odio ipsum, et vulputate est molestie ac.

 

Image
blue jays

Two Column: Billboard

 


This component features a two column card layout consisting of news and events that can either be clickable to view more content with a CTA button, or remain static.

Two Column Billboard

Donec eu nibh vel nisl rhoncus gravida. Fusce tempor ipsum sed orci feugiat finibus. Vivamus sollicitudin urna ante, a viverra magna mattis vitae. Duis convallis augue sit amet tortor sollicitudin interdum. Sed pharetra odio ipsum, et vulputate est molestie ac. Fusce et vestibulum augue. Nulla vitae orci porta, vestibulum tortor accumsan, volutpat est. Suspendisse in vestibulum ligula, ut placerat lectus. Nunc non commodo dui. Cras non ipsum nec metus accumsan maximus. Aenean quis tortor placerat, sagittis est nec, volutpat eros. Integer nunc nulla, ullamcorper vitae semper vel, fermentum eget nisi.
billboard

Sample Billboard Title No Link

Donec eu nibh vel nisl rhoncus gravida. Fusce tempor ipsum sed orci feugiat finibus. Vivamus sollicitudin urna ante, a viverra magna mattis vitae. Duis convallis augue sit amet tortor sollicitudin interdum. Sed pharetra odio ipsum, et vulputate est molestie ac. Fusce et vestibulum augue. Nulla vitae orci porta, vestibulum tortor accumsan, volutpat est.

Link List


These link lists have a variable amount of links that can be added on the left or right column. The links can appear as three different color profiles: None, Dark Blue, Light Blue, and Green, as shown below.

Quick Facts


This quick facts component has a variable amount of facts that can be highlighted. There are four different options for fact types: None, Percent Sign, Number Sign, Dollar Sign. The background image is customizable. 

Stat 20
20

Sample Description

Stat 100
100%

Sample Description Goes Here

Stat 33
#33

Programs

Stat 55
$55

Sample Description

Accordion


The intended use of accordions is to truncate large amounts of information on very text/content heavy pages, and also to keep scroll depth down in order to create the best possible UX. Items in the accordion component are variable in number. Color profile is not editable.

Accordion Section Title

Sample intro text goes here.

Sample text goes here

Title, Text, and Buttons


This component includes a title, body text, and buttons. Buttons do not have editable color profiles. The background is an editable image that can be changed. This component was designed to only be placed above the footer and used as a final sign-off with CTA(s). A minimum of one CTA must be used, with a maximum of four total. 

Sample Title Field

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada nibh eros, at lobortis arcu sagittis sed. Quisque id malesuada nisl. In vel ligula laoreet, bibendum lorem et, interdum odio. Donec ut augue hendrerit, auctor elit congue, sodales enim.

 

Three Column: Title, Text, and Buttons


This three column component features a title, body text, and three buttons on the far right. Three color profiles are available to choose from: White, Tan, and Light Blue.

Three Column Title

Integer scelerisque fringilla velit nec aliquam. Sed rhoncus pretium urna id dapibus. Morbi id nibh et orci vestibulum volutpat. Maecenas consectetur ex lectus, sed finibus nunc sodales ac. Aenean eget tortor nec lorem ultrices gravida. Sed sodales eros ac felis aliquet, vitae dictum eros porta. Nam congue molestie turpis. Nulla facilisi. Praesent a nisl vel turpis sagittis posuere. Integer consectetur eleifend ipsum sit amet mattis. Vestibulum mollis vitae elit non pharetra.

Three Column Title

Integer scelerisque fringilla velit nec aliquam. Sed rhoncus pretium urna id dapibus. Morbi id nibh et orci vestibulum volutpat. Maecenas consectetur ex lectus, sed finibus nunc sodales ac. Aenean eget tortor nec lorem ultrices gravida. Sed sodales eros ac felis aliquet, vitae dictum eros porta. Nam congue molestie turpis. Nulla facilisi. Praesent a nisl vel turpis sagittis posuere. Integer consectetur eleifend ipsum sit amet mattis. Vestibulum mollis vitae elit non pharetra.

Three Column Title

Integer scelerisque fringilla velit nec aliquam. Sed rhoncus pretium urna id dapibus. Morbi id nibh et orci vestibulum volutpat. Maecenas consectetur ex lectus, sed finibus nunc sodales ac. Aenean eget tortor nec lorem ultrices gravida. Sed sodales eros ac felis aliquet, vitae dictum eros porta. Nam congue molestie turpis. Nulla facilisi. Praesent a nisl vel turpis sagittis posuere. Integer consectetur eleifend ipsum sit amet mattis. Vestibulum mollis vitae elit non pharetra.

Testimonial


This testimonial component can have between one and three testimonial columns, but we suggest always using all three columns. Images and quotes are editable.

test
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ullamcorper metus et pharetra. In hac habitasse platea dictumst.
— Jane Doe '14
sample
Nulla egestas massa ut erat mattis, at vehicula lectus vestibulum. Suspendisse sit amet diam lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur ut dolor.
— John Doe
portrait
Proin tempus sem ligula, sit amet hendrerit libero posuere quis. Nulla egestas massa ut erat mattis, at vehicula lectus vestibulum. Suspendisse sit amet diam lacus.
— Jane Doe

Video: Large Player with Title


This video component has a large video player and allows a teaser image to be uploaded as a preview for the video.

Video Player With Title

Bluejay
Watch Video

Gallery: Q&A


This two-column, question and answer component can have a variable number of Q&As. The background color or imagery should not be changed in order to provide the best possible legibility of the Q&A's. 

Gallery: Modal


This gallery component has a variable number of Carousel Slide components and an editable background image. 

Gallery: Carousel


This gallery component has a variable number of images that can be added to the carousel.

Image/Chart/GIF


This component allows for an image, chart, or gif to be displayed at a large scale.

test
Caption Sample

Full Width Image with Text


This component allows for an image, with a title and body text overlayed. A dark gradient is included in the component to create contrast between the text and image, but we suggest using images like landscapes or campus architecture. Images should not feature close ups of faces or figures. 

Full Width Image Title

Donec eu nibh vel nisl rhoncus gravida. Fusce tempor ipsum sed orci feugiat finibus. Vivamus sollicitudin urna ante, a viverra magna mattis vitae. Duis convallis augue sit amet tortor sollicitudin interdum. Sed pharetra odio ipsum, et vulputate est molestie ac. Fusce et vestibulum augue.

 

Cards: Contact (Staff Listing)


This component displays cards of all contact information for faculty based on department selected. 

Cards: News


This component displays cards of most recent news. Content is selected by choosing a category linking URLs or with titles. 

Cards: Events/Important Dates


This component displays event information as cards. It includes an editable title and background image. Events can be selected by the event category.

Events Title

Accolade


This component displays a variable number of images of accolades. No fewer than 2 accolades should be displayed.

Slate Form Embed


This embedded form component has an editable title.

Form Title

Loading...

Timeline


This Timeline component allows important dates to be added with titles, dates, descriptions, and images. Titles should not exceed 30 characters and descriptions should not exceed 150 characters.

Creighton Through and Through

  • Test Item

    1801

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

    test
  • Test Item

    1911

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

    test
  • Test Item

    1999

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

    test
  • Test Item

    2004

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

    test
  • Test Item

    2005

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

    test
  • Test Item

    2019

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

    test
  • Test Item

    2020

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

    test
  • Test Item

    2021

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

    test
  • Test Item

    2022

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • Test Item

    2023

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • test

    2024
  • Test Item

    2024

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • Test Item

    2025

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • Test Item

    2026

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • Test Item

    2027

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • Test Item

    2028

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • Test Item

    2029

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • Test Item

    2030

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • Test Item

    2031

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • Test Item

    2032

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • Test Item

    2040

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • Test Item

    2050

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

  • Test Item

    2060

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin . Lorem ipsum dolor sit amet, consectetur

Profile Spotlight


This component allows for a title, subtitle, and a variable amount of profiles that can be perpetually clicked through.

Pulled Quote


This component allows for a large-scale display of a quote and an attribution. Quotes should not exceed 400 characters.

It was so rewarding to see the project go from my initial design to a full-sized mural.
— Amanda Yvonne Edwards

Text List (Non-Links)


This component includes a title, body text, and a two column bulleted list. This component does not include links. When adding text to the bulleted lists, columns should be alternated so one column does not become significantly longer than the other. 

 Academic Program Finder

Library Search