Career Center Styling Guide

Career Center Styling Guide

A centralized guide for the Career Center’s visual page builder system, reusable components and content patterns used across the website.

Click here for the homepage guide
FSU Gold Banner

Typography

Headers

(H2) Heading Text

(H3) Sub-heading Text

(H4) Sub-heading Text Small

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id libero at lectus laoreet pharetra tempus ac leo. Nam vel ipsum quis ante tempus fringilla. Nam arcu erat, egestas porta nisl eu, feugiat tincidunt lorem. Quisque maximus mauris nisl, eu porttitor nisl accumsan sed. Proin nulla ipsum, tempus a tempor eu, dictum sed sapin. Vestibulum vel nibh mattis, auctor ex at, ornare est. Praesent quis metus nisl. Mauris vulputate ante vel blandit tristique.

Containers

Tip Container

Tip Section

Highlight Container

Highlight Section

Lists / Cards

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis non est rhoncus congue. Nam vitae risus arcu. Vestibulum interdum molestie vulputate. Aenean viverra dapibus rutrum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis non est rhoncus congue. Nam vitae risus arcu. Vestibulum interdum molestie vulputate. Aenean viverra dapibus rutrum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis non est rhoncus congue. Nam vitae risus arcu. Vestibulum interdum molestie vulputate. Aenean viverra dapibus rutrum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis non est rhoncus congue. Nam vitae risus arcu. Vestibulum interdum molestie vulputate. Aenean viverra dapibus rutrum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis non est rhoncus congue. Nam vitae risus arcu. Vestibulum interdum molestie vulputate. Aenean viverra dapibus rutrum.

Descriptive Link List

https://newdesign-fsu-career.pantheonsite.io/
Descriptive Link Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis non est rhoncus congue. Nam vitae risus arcu. Vestibulum interdum molestie vulputate. Aenean viverra dapibus rutrum. Mauris euismod massa vel varius congue. Fusce est ligula, faucibus vel suscipit id, elementum ac sem. Donec malesuada vestibulum condimentum. Maecenas ipsum quam, vulputate sit amet odio sit amet, mattis semper tellus. Etiam non ornare urna.
https://newdesign-fsu-career.pantheonsite.io/
Descriptive Link Item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis non est rhoncus congue. Nam vitae risus arcu. Vestibulum interdum molestie vulputate. Aenean viverra dapibus rutrum. Mauris euismod massa vel varius congue. Fusce est ligula, faucibus vel suscipit id, elementum ac sem. Donec malesuada vestibulum condimentum. Maecenas ipsum quam, vulputate sit amet odio sit amet, mattis semper tellus. Etiam non ornare urna.
https://newdesign-fsu-career.pantheonsite.io/
Descriptive Link Item 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis non est rhoncus congue. Nam vitae risus arcu. Vestibulum interdum molestie vulputate. Aenean viverra dapibus rutrum. Mauris euismod massa vel varius congue. Fusce est ligula, faucibus vel suscipit id, elementum ac sem. Donec malesuada vestibulum condimentum. Maecenas ipsum quam, vulputate sit amet odio sit amet, mattis semper tellus. Etiam non ornare urna.

Card Grid

https://newdesign-fsu-career.pantheonsite.io/
FSU Shadow

Card Grid Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar tristique pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar tristique pellentesque.
https://newdesign-fsu-career.pantheonsite.io/
FSU Shadow

Card Grid Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar tristique pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar tristique pellentesque.
https://newdesign-fsu-career.pantheonsite.io/
FSU Shadow

Card Grid Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar tristique pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar tristique pellentesque.
https://newdesign-fsu-career.pantheonsite.io/
FSU Shadow

Card Grid Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar tristique pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar tristique pellentesque.
https://newdesign-fsu-career.pantheonsite.io/
FSU Shadow

Card Grid Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar tristique pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar tristique pellentesque.

Layouts & Sections

Two Column Layout

Sub-heading Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit vel neque at consectetur. Duis convallis eu sem bibendum rutrum. Vivamus volutpat convallis erat at aliquet. Aliquam placerat arcu odio, a porta mi fringilla a. Etiam vitae consectetur nibh. Etiam maximus justo ac odio vestibulum gravida ut tristique turpis.

Sub-heading Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit vel neque at consectetur. Duis convallis eu sem bibendum rutrum. Vivamus volutpat convallis erat at aliquet. Aliquam placerat arcu odio, a porta mi fringilla a. Etiam vitae consectetur nibh. Etiam maximus justo ac odio vestibulum gravida ut tristique turpis.

Sidebar Layout #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title

Images / Videos

Single Image

This is a caption of the caption variety
1

Multiple Images (Carousel)

This is a caption of the caption variety 1
This is a caption of the caption variety 2
This is a caption of the caption variety 3
This is a caption of the caption variety 4
This is a caption of the caption variety 6
This is a caption of the caption variety 7
This is a caption of the caption variety 8
This is a caption of the caption variety 9
This is a caption of the caption variety 10
This is a caption of the caption variety 11
This is a caption of the caption variety 12
1

Image & Text

This element allows for swapping from image/text being left or right, and it also allows for placing a featured banner on top if the element is the first item.

Left Text Right Image

Lorem ipsum dolor sit amet consectetur adipiscing elit. Dolor sit amet consectetur adipiscing elit quisque faucibus.

Click Here
test

Left Image Right Text

Lorem ipsum dolor sit amet consectetur adipiscing elit. Dolor sit amet consectetur adipiscing elit quisque faucibus.

Click Here
test

Video Embed

This element allows uploading a video onto the filesystem for display or implementing an embed YouTube link, it is recommended to use embed links.

Other Elements