UTMB Web + Sitefinity Cheatsheet

Here you'll find a long, but helpful list of CSS helper classes to assist in designing your UTMB website's user interface (UI) quickly and accurately.

Maintaining brand integrity across sites is no small task. When used properly, these helper classes work to take the guess-work out of that for you by attempting to normalize key page and component elements across the board. The UTMB Web 4X CSS helper classes are applied to HTML elements and components.

The UTMB Sitefinity widget CSS helper classes are applied to Sitefinity widget components, extending their look and ability.

UTMB Web 4x CSS Helper Classes

These CSS helper Classes are applied to HTML elements.

Text Color (a11y)

Brand color palette classes recently reformulated to meet web accessibility requirements.

Apply to any HTML text elements, such as p, span, etc.

UTMB Web: Color

Expand All Collapse All
Background Color

Brand background color palette classes recently reformulated to meet web accessibility requirements.

Apply to any HTML text elements, such as div, span, etc.

UTMB Web: Background Color

Expand All Collapse All
Background Gradient

Brand background color gradient extension classes. Use these classes by stacking onto a UTMB background color class. Makes for a really nice effect on large blocks elements.

UTMB Web: Background Gradient

Expand All Collapse All

Brand background pattern extension classes. Use these classes by stacking onto a UTMB background color class. Makes for a really nice effect on large blocks elements.

UTMB Web: Background Pattern

Expand All Collapse All
Typography

Useful basic typography helper classes applied to HTML elements.

UTMB Web: Typography

Expand All Collapse All
Links / Buttons

These hyperlink and button class options can be directly applied to hyperlinks and buttons within the HTML page content.

In Sitefinity, that refers to the links and buttons inserted into in-page content blocks.

These classes format hyperlinks and buttons exactly the same way. We demonstrate both here side-by-side.

UTMB Web: Links & Buttons

Expand All Collapse All
Images / Photos

These photo class options can be directly applied to images within the HTML page content.

In Sitefinity, that refers to the images inserted into in-page content blocks.

UTMB Web: Photo

Expand All Collapse All
Lists

These list class options can be directly applied to ordered and unordered lists within the HTML page content.

In Sitefinity, that refers to the lists inserted into in-page content blocks.

UTMB Web: Lists

Expand All Collapse All
Alerts

These alert dialogue options can be used within the HTML page content.

In Sitefinity, that refers to the HTML added using in-page content blocks.

UTMB Web: Alerts

Expand All Collapse All
Wells

Wells are stylized content containers. These classes help with styling them with UTMB brand colors. Wells can be used within the HTML page content.

In Sitefinity, that refers to the HTML added using in-page content blocks.

UTMB Web: Wells

Expand All Collapse All
Panels

Panels are stylized content containers. These classes help with styling them with UTMB brand colors. Panels can be used within the HTML page content.

In Sitefinity, that refers to the HTML added using in-page content blocks.

UTMB Web: Panels

Expand All Collapse All
Tables

These table class options can be directly applied to a table within the HTML page content.

In Sitefinity, that refers to the tables inserted into in-page content blocks.

UTMB Web: Tables

Expand All Collapse All
Design Elements

Various reusable UTMB styled design styles.

UTMB Web: Design Elements

Expand All Collapse All
Global / Utility

Various utility classes to help simplify some common design needs which may be more cumbersome than desired when working in a Web CMS environment.

UTMB Web: Global

Expand All Collapse All

UTMB Sitefinity Widget Helper Classes

These CSS helper classes are applied to Sitefinity widget components.

Nav > Horizontal

Sitefinity Horizontal Navigation widget UI design classes.

UTMB Sitefinity Widgets: Nav > Horizontal

Expand All Collapse All
Nav > Sidebar

Sitefinity Horizontal Navigation widget UI design classes.

UTMB Sitefinity Widgets: Nav Sidebar

Expand All Collapse All
Nav > Vertical

Sitefinity Vertical Navigation widget UI design classes.

UTMB Sitefinity Widgets: Nav > Vertical

Expand All Collapse All
Nav > Tabs

Sitefinity Tabs Navigation widget UI design classes.

UTMB Sitefinity Widgets: Nav > Tabs

Expand All Collapse All
Image

Sitefinity Image widget UI design classes.

UTMB Sitefinity Widgets: Image

Expand All Collapse All
News

Sitefinity News widget UI design classes.

UTMB Sitefinity Widgets: News (list)

Expand All Collapse All
Blog Posts

Sitefinity Blog Posts widget UI design classes.

UTMB Sitefinity Widgets: Blogs (list)

Expand All Collapse All
Events

Sitefinity Events widget UI design classes.

UTMB Sitefinity Widgets: Events (list)

Expand All Collapse All
Lists > Accordion

Sitefinity Accordion List widget UI design classes.

UTMB Sitefinity Widgets: Lists > Accordion

Expand All Collapse All
Lists > Anchor

Sitefinity Anchor List widget UI design classes.

UTMB Sitefinity Widgets: Lists > Anchor

Expand All Collapse All
Lists > Expandable

Sitefinity Expandable List widget UI design classes.

UTMB Sitefinity Widgets: Lists > Expandable

Expand All Collapse All
Lists > Expanded

Sitefinity Expanded List widget UI design classes.

UTMB Sitefinity Widgets: Lists > Expanded

Expand All Collapse All
Lists > Link List

Sitefinity Link List widget UI design classes.

UTMB Sitefinity Widgets: Lists > Link List

Expand All Collapse All
Lists > Link Card

Sitefinity Link Card List widget UI design classes.

UTMB Sitefinity Widgets: Lists > Link Card

Expand All Collapse All
Lists > Panel

Sitefinity Panel List widget UI design classes.

UTMB Sitefinity Widgets: Lists > Panel

Expand All Collapse All
Lists > People

Sitefinity People List widget UI design classes.

UTMB Sitefinity Widgets: Lists > People

Expand All Collapse All
Lists > Simple

Sitefinity Simple List widget UI design classes.

UTMB Sitefinity Widgets: Lists > Simple

Expand All Collapse All
Lists > Tabs

Sitefinity Tabs List widget UI design classes.

UTMB Sitefinity Widgets: Lists > Tabs

Expand All Collapse All
Feature Box

Sitefinity Feature Box widget UI design classes.

UTMB Sitefinity Widgets: Feature Box (carousel)

Expand All Collapse All
Categories & Tags

Sitefinity Categories & Tags widget UI design classes.

UTMB Sitefinity Widgets: Categories & Tags

Expand All Collapse All

Design, Tools & Training

Skip Menu