CSUMB Web Style Guide

Type

Typography

We use Hind for body text, and Open Sans for headings.

Paragraphs

A regular paragraph.

The try-works are planted between the foremast and mainmast, the most roomy part of the deck. The timbers beneath are of a peculiar strength, fitted to sustain the weight of an almost solid mass of brick and mortar, some ten feet by eight square, and five in height. The foundation does not penetrate the deck, but the masonry is firmly secured to the surface by ponderous knees of iron bracing it on all sides, and screwing it down to the timbers.

Text basics

Do not use underline except for hyperlinks.

Text in all cases should be left-aligned, with the small exception of several specifically-designed headers on the campus homepage. Centering or right-aligning text can cause issues for users translating pages to right-aligned languages, and breaks visual flow for users on mobile devices, especially when re-flowing table structures into visual linear lists.

Strong text, Emphasized text, Deleted/Redacted text, Underlined text,
Superscript: 3rd, 4th, and 5th
Subscript: H2O and C8H10N4O2

Links

Links should have underlines.

This is a link to Cal State Monterey Bay.

Lead paragraph

Lead paragraphs are used for the "elevator pitch" of a page.

The page should be understood by reading this paragraph alone.

Unordered lists

  • Item A
  • Item B
  • Item C

Ordered lists

  • Item A
  • Item B
  • Item C

Blockquote

Blockquotes should be wrapped in .card.quote elements, the citation is optional.

Everyone gets a raise!

CSUMB President without link

Everyone gets a raise!

CSUMB President With Link

Document links

Links to documents should be visibly distinct to show the user that a different action will happen when the select it.

Colors

Forms

Forms are based on the core Boostrap form elements, and should follow the Boostrap conventions.

Basic form elements

Example block-level help text here.

Required form elements

For accessibility, required form elements should have a visible marker with a readable element that contains the word "Required." A floating tooltip for visual users with mice is also helpful.

Content forms

Forms that appear within content and perform an action should be wrapped in a well. These are especially helpful for small widgets or inline search forms.

Buttons

Headings

Heading levels

Headings of level 1 are reserved for the main page heading.

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Headings with links

Headings may also contain links

Collapsible headers

Collapse headings to make content more scannable.

Heading level 2

Heading level 3

Heading level 4

Quick anchor links

On hover, users should be able to access a quick anchor link to the header. The ID of the header should consist of only alphanumeric characters and hyphens.

A heading with an anchor

Images

Full-width images

Images with a non-square aspect ratio should fill the entirety of the parent container or page. Two sizes should be available to save download size for mobile users.

Square images

Square images should float to the right on desktop breakpoints, then center on smaller screens.

Captions

Captions can be used to add more description to an image.

Such a cute cat!

Navigation

Pagers

Pagers should be used for long lists.

Breadcrumbs

The current page should be not linked but also available in the breadcrumbs. The first item should always link to the CSUMB homepage.

Use glyphicons instead of chevron characters because Windows doesn't handle those elements correctly in Trade Gothic.

Structure

Content Sections

Content sections are used to visually highlight different areas of a page.

Note that content sections break out of any container, so they must always have content within a div.container element.

Some text in a paragraph.

  • Item A
  • Item B
  • Item C
  1. Item A
  2. Item B
  3. Item C

Website User Manual

Everyone gets a raise!

CSUMB President without link

Everyone gets a raise!

CSUMB President With Link

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Positive Small Positive Normal Positive Large

Neutral Small Neutral Normal Neutral Large

Negative Small Negative Normal Negative Large

Horizontal rules

Use horizontal rules to visually break up different sections of the page.


Related content

A simple list of other resources related to the current page.

Widgets

Dashboard widgets

Dashboard widgets are small indicators of the status of a user's information. They should diplay short, terse, information, and provide the option to expand for more.

Otter Card

You owe us $100.