St. Kate's components

ACCORDION

Used to expand and collapse large amounts of text and data. 

FIXED:

  • Title field: left aligned (not changeable)

OPTIONS:

  • Optional CSS class field

This is the first item's body of text. 

This is the second item's body of text. 

BUTTON ROW

Place up to 4 button links inline.

FIXED:

  • Headline: Center aligned (not changeable)

OPTIONS:

  • Background color selection:
    • Gray
    • Light Gray
    • Green
    • Green Light
    • Purple
    • Purple Light
    • Yellow
    • Yellow Light
  • Button link style select:
    • Primary
    • Outline
    • Outline invert
  • Link can either open in new tab or existing tab
  • "Rel" and "Class" style attribute inputs optional
Button 3 Outline Invert

CALL TO ACTION

Large text area with white background. Usually includes buttons (optional).
Used at top of landing pages under hero to display action buttons.

FIXED:

  • Headline: Center aligned (not changeable)
    Max Characters: 255

OPTIONS:

  • Background color selection:
    • Gray
    • Gray Light
    • Purple
    • Purple Light
    • Green
    • Green Light
    • Yellow
    • Yellow Light
  • - Background image selection (optional):
    *Adding a background image changes the layout of the CTA.

Live example

Welcome to this webpage

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

CAREER OUTCOMES

(particular collective)

Used on all academic program pages

OPTIONS:

  • Optional CSS Class input field
  • includes field to paste EMSI widget (Career widget) javascript code

Live example

Career Outcomes

Apply

Financial Aid

How to finance your education.

Learn More

Information Session

Ask questions, meet faculty, and more.

Learn More

Tuition Rates

Review costs and payment processes.

CAROUSEL

Carousel slideshow of images or videos with text caption

*Recommended image size:
Width: 1000px
Height: 563px

16:9 ratio.

FIXED:

  • Title field: Left aligned (not changeable)
    Max characters: 255

OPTIONS:

  • Images/videos selected by Drupal entity browser (photo/video library)

Live example

CONTENT SEQUENCE

Add content in a sequence indicating a multi-step process.

FIXED: 

  • Title Field: Center aligned (not changeable)

OPTIONS:

  • Background color selection:
    • Gray
    • Light Gray
    • Green
    • Green Light
    • Purple
    • Purple Light
    • Yellow
    • Yellow Light

Live example

Title
Step 1

Step 1

This is information needed for step 1. Do all this before step 2.

Step 2

This is information needed for step 2. Do all this before step 3.

You have made it to step 3

This is information needed for step 3. Now do all this before step 4.

DEGREE OVERVIEW

particular collective

Used on all program pages for degree background and form

FIXED: 

  • Title Field: Left aligned (not changeable)

OPTIONS:

  • Allows for accreditation logo upload (optional)
  • Can Include links for up to 4 buttons (*Buttons designed to transition to darker purple color on hover.*)
  • Form is optional. Copy and paste script into snippet field - Program interest script generated via Slate.

Live example

Master of Art in Basket Weaving

Intro copy ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut.

Degree questions, answered.

Loading...

EXPERIENCE CAROUSEL

(particular collective)

A full screen image carousel with optional copy and/or buttons.

Recommended image size:
Width: 2000px
Height: 1400px/1600px

Preferably 1MB or less

FIXED: 

  • Title Field: Left aligned (not changeable)

OPTIONS:

  • Optional button link inputs
  • Images selected by Drupal entity browser (photo library)

Live example

FILE LIST

Upload files and display in a list of links.

FIXED: 

  • Title Field: Left aligned (not changeable)

OPTIONS:

  • Drupal entity browser for file upload

*This component is antiquated. Preference is to house documents in BOX drive with link.*

HERO SLIDER

(particular collective)

Hero image carousel, intended for program pages.

FIXED: 

  • Title Field: Left aligned (not changeable)

OPTIONS:

  • Learning format label (optional)

Live example - *Not currently in use on website.*

HERO CONTENT (pc)

(particular collective)

Hero design used either on homepage and current on updated program pages.

FIXED: 

  • Title Field: Left aligned (not changeable)

OPTIONS:

  • Learning format label (optional).
  • Primary button link/s
  • Tool Tip (Also named Title)
Online

This is the name of the program.

purple stkate's flag outside.
Online

This is the name of the program.

At vero eos et accusamus et iusto odio dignissimos ducimus.

Blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

 

ICON

Icon with text

FIXED: 

  • Title Field: Center aligned (not changeable)

OPTIONS:

  • Images (PNG,JPG,SVG) selected by Drupal entity browser (photo/video library)

JUMBOTRON

Large image area typically displayed at the top of pages.

Recommended image size:
Width:   2400px
Height:  1600px

Preferably 1MB or less

FIXED: 

  • Title Field: Center aligned (not changeable)

OPTIONS:

  • Media (JPG, PNG, and MP4) selected by Drupal Media browser (photo/video library)
  • Built in Call to Action component (Optional) allows for:
    • Link field for buttons (optional)
    • Section divider (optional)

Jumbotron with a CTA:

Calling all art students

Sign up for the art show today!

LINK LIST

Vertical list of links. Includes options for four different icons (pictured below).

FIXED: 

  • Title field for each link: Center aligned (not changeable)

OPTIONS: 

  • Style selection (None, Arrow, Language, or Lock)
  • Option of open link in same window, or open in a new tab.

LINK LIST horizontal

Horizontal list of links. Includes options for four different icons (pictured below).

FIXED: 

  • Title field: Left aligned (not changeable)

OPTIONS:

  • Style selection (None, Arrow, Language, or Lock)
  • Option of open link in same window, or open in a new tab.

MEDIA CONTENT

Image or Video with title and copy paragraph.

FIXED:

  • Title: Left aligned (not changeable)

OPTIONS:

  • Category field - basic text only (optional)
  • Include a secondary button under copy (optional)
  • Images/video selected by Drupal entity browser (media library)
  • Can position media either first (left of) or last (right of) copy
  • Optional Media sizes ( 1/3rd width, 1/2 width, 2/3 width)
  • Bleed image: Should the image go beyond the main content container? Only works when "media last" is selected for media direction
  • Background-colors:
    • Gray
    • Light Gray
    • Green
    • Green Light
    • Purple
    • Purple Light
    • Yellow
    • Yellow Light
Sample heading

Here is a little blurb about the video. Hear from the winner of the Scholarship.

MEDIA WITH CAPTION

Image with line of copy underneath.
Copy: Left aligned (not changeable)

OPTIONS:

  • Image selected by Drupal entity browser (media library)
Athlete of the Week: Abby Conzemius '17

St. Kate's remains in first place in the tournament

MEDIA HEADER

Image or Video with title and copy paragraph.

* Component not built correctly.
Uses an H1 for title which is reserved only for the top of a page. Use Media Content component instead.

FIXED:

  • Title: Center aligned (not changeable)

OPTIONS:

  • Category field - basic text only
  • Images/video selected by Drupal entity browser (media library)
  • Can position media either first (left of) or last (right of) copy
  • Media size ( 1/3rd width, 1/2 width, 2/3 width)
  • Bleed image: Should the image go beyond the main content container? Only works when "Media Last" is selected for media direction
  • Background-colors:
    • Gray
    • Light-Gray
    • Purple
    • Light Purple
    • Green
    • Light Green
    • Yellow
    • Light Yellow

St. Kate's softball is on fire

Team advances to the final round after winning yesterday 7-1.

MULTI ITEM ROW

Add up to 4 pieces of content spaced equally horizontally in a row.

FIXED:

  • Headline: Center aligned (not changeable)

OPTIONS:

  • Background-colors:
    • Gray
    • Light-Gray
    • Purple
    • Light Purple
    • Green
    • Light Green
    • Yellow
    • Light Yellow
  • Optional CSS Class input field

Sample heading

Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.

I'm a Headline
Softball coach, five players receive post season honors
Runner finishes the YWCA Women's Triathlon
Citizen Katie volunteers landscaping at the St. Paul Public Library in Highland Park.

QUOTE

Image with Quote and caption

FIXED:

  • Title: Left aligned. *No styling included on title (not changeable)

OPTIONS:

  • Images selected by Drupal entity browser (photo library)
I'm a title

This is my quote. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum

Photo of Andrew Melendres

John Doe

SCHOOL BOXES

particular collective

Selection boxes for each college at St. Kates.
Each box has assigned college color border above, so really only used for one purpose.

FIXED:

  • Title: Left aligned (not changeable)

OPTIONS:

  • Images - selected by Drupal entity browser (media library)
  • Primary button for link

College for Women

St. Paul campus

Our premier undergraduate program for women prepares you for a career to meet the needs of our time.

Nursing Program

Nursing students walking on campus

Learn about St. Kate's industry leading Nursing programs

St. Kate's Athletics

St. Catherine University Wildcat soccer team circles up

Explore all St. Kate's has to offer in our Athletics department

STATS

Quick stat with BIG number and caption underneath. 
Usually used together in groups.

OPTIONS:

  • Title: Center aligned(not changeable)

OPTIONS:

  • Statistic usually a number or percentage

Live example (bottom of page)

VIEW EMBED

Embed an existing view into the content. Views are filtered displays of site content.

FIXED:

  • Title: Left aligned (not changeable)
  • OPTIONS:

    • View selection tab
    • Block Selection tab
    • Link to page of view population (optional)
    • Background-colors:
      • Gray
      • Light-Gray
      • Purple
      • Light Purple
      • Green
      • Light Green
      • Yellow
      • Light Yellow