海角社区

Skip to Main Content
Cascade CMS
twoColumn twoRight styleguide

Styleguide

COLOR PALETTE

Primary


Secondary

 

unf osprey logo element in navy

 

Additional Colors

Fonts

The website uses Google Fonts .

 

Headline and Text

Style Changes (Effective December 16, 2024):

  • Heading One: Now in all uppercase and centered (non-background version).
  • Heading Three and Four: Reduced size with a smaller gap between the heading and paragraph.
  • Heading Five: Smaller gap between the heading and paragraph.

 

HEADING ONE

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.

Heading Two

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.

Heading Three

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.

Heading Four

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.

Heading Five

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.

h2.headingGray

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.

h3.headingGray

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.

h4.headingGray

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.

h5.headingGray

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.

h2.cyan

For cyan h2 over blue backgrounds.

h2.reverse-blue

h2.reverse-gray

h2.reverse-cyan

 

For reverse bar colored h2 headings.


This is a notification.

Accents


normal horizontal rule


hr.blue


hr.cyan


hr.gray

Quotes

Style Changes (Effective December 16, 2024):

  • Block Quotes: All block quotes will be displayed in Open Sans Italic font.
  • White Background Quotes: The design of quotes with a white background has been updated to enhance readability and visual appeal.
This is a blockquote. This is a blockquote. This is a blockquote. This is a blockquote. This is a blockquote.
This is a quote in a blue box

Intro Paragraph

Style Addition (Effective December 16, 2024):

This new format should only be used on the first introduction paragraph on a page.

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.

 

Highlights

Highlight on white background
Highlight on blue background
Highlight on cyan background
Highlight on gray background
Highlight on light cyan background
Highlight on light gray background

Floats

Uses the classes .floatLeft and .floatRight. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula odio, imperdiet nec volutpat et, commodo eu massa. Nulla nec nunc ac eros lobortis tristique pretium vitae mi. Donec vitae purus justo. Ut id neque a neque lacinia volutpat nec ut urna. Sed turpis massa, dignissim eu pulvinar id, mattis et nibh. Three students sit on the grass of the 海角社区Green.Mauris malesuada ligula quis neque pharetra aliquet sagittis quam suscipit. Donec est sem, porttitor consequat malesuada luctus, porttitor tempor sem. Sed eu nisi a ligula pulvinar consequat. Donec cursus dui nec sem sagittis vestibulum. Nullam non nulla magna, consequat convallis velit. Nullam fermentum porta enim sit amet tristique. Aliquam fermentum nibh at ligula lacinia laoreet interdum urna sagittis. Vivamus dui ligula, vestibulum vel interdum consequat, pretium non lectus. Mauris nisi ipsum, varius vitae dapibus sit amet, pretium eu lacus. Maecenas lorem nulla, blandit mollis commodo ac, ultricies sed magna. Nunc auctor suscipit justo, in pulvinar felis rhoncus sit amet. Donec adipiscing convallis purus id cursus. Quisque consectetur accumsan elit ac venenatis. Sed at sapien vel tortor molestie dictum. Mauris vitae risus vel nibh feugiat porta eget eu lectus. Nulla tristique, diam ac imperdiet rhoncus, risus ligula laoreet sem, vel consectetur odio elit ut odio. Maecenas lorem metus, laoreet at venenatis in, dictum non odio.

Color Blocks

Blue Block

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.

Button

Button

Gray Block

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.

Button

Cyan Block

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.

Button

Buttons

COLOR
.btn-blue
.btn-cyan
.btn-gray
SIZE (opt)
.btn-small
.btn-medium
.btn-large
STYLE (opt)
.btn-border

Lists

  • List Item 1
  • List Item 2
  • List Item 3
    • Sub Item 1
    • Sub Item 2
  • List Item 4
  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. Sub Item 1
    2. Sub Item 2
  4. List Item 4
  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. Sub Item 1
    2. Sub Item 2
  4. List Item 4
  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. Sub Item 1
    2. Sub Item 2
  4. List Item 4
Tables
Default
Type Summer 2021 Fall 2021 Spring 2021
GPA 3.0 - 3.4 3.5 - 4.4 3.0 - 3.4
SAT 1050 - 1170 1180 - 1300 1050 - 1170
ACT 20 - 23 24 - 27 20 - 23
.table-blue
Type Summer 2021 Fall 2021 Spring 2021
GPA 3.0 - 3.4 3.5 - 4.4 3.0 - 3.4
SAT 1050 - 1170 1180 - 1300 1050 - 1170
ACT 20 - 23 24 - 27 20 - 23
.table-gray
Type Summer 2021 Fall 2021 Spring 2021
GPA 3.0 - 3.4 3.5 - 4.4 3.0 - 3.4
SAT 1050 - 1170 1180 - 1300 1050 - 1170
ACT 20 - 23 24 - 27 20 - 23
.table-cyan
Type Summer 2021 Fall 2021 Spring 2021
GPA 3.0 - 3.4 3.5 - 4.4 3.0 - 3.4
SAT 1050 - 1170 1180 - 1300 1050 - 1170
ACT 20 - 23 24 - 27 20 - 23