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
  • .red
    CSS Class: red

    UTMB Red: #da1f12 (Web Primary)

    <p class="red">
    UTMB Red: #da1f12 (Web Primary)
</p>
  • .gray
    CSS Class: gray

    UTMB Gray: #444444 (Web Secondary)

    <p class="gray">
    UTMB Gray: #444444 (Web Secondary)
</p>
  • .gray-light
    CSS Class: gray-light

    Gray Light: #c9cac8

    <p class="gray-light">
    Gray Light: #c9cac8
</p>
  • .gray-dark
    CSS Class: gray-dark

    Gray Dark: #111111

    <p class="gray-dark">
    Gray Dark: #111111
</p>
  • .blue
    CSS Class: blue

    Blue: #1b5196

    <p class="blue">
    Blue: #1b5196
</p>
  • .blue-light
    CSS Class: blue-light

    Blue Light: #c0e1ed

    <p class="blue-light">
    Blue Light: #c0e1ed
</p>
  • .blue-dark
    CSS Class: blue-dark

    Blue Dark: #1c3a56

    <p class="blue-dark">
    Blue Dark: #1c3a56
</p>
  • .teal
    CSS Class: teal

    Teal: #457a82

    <p class="teal">
    Teal: #457a82
</p>
  • .teal-light
    CSS Class: teal-light

    Teal Light: #c4e1de

    <p class="teal-light">
    Teal Light: #c4e1de
</p>
  • .teal-dark
    CSS Class: teal-dark

    Teal Dark: #005760

    <p class="teal-dark">
    Teal Dark: #005760
</p>
  • .orange
    CSS Class: orange

    Orange: #eba149

    <p class="orange">
    Orange: #eba149
</p>
  • .orange-light
    CSS Class: orange-light

    Orange Light: #f5d7a5

    <p class="orange-light">
    Orange Light: #f5d7a5
</p>
  • .orange-dark
    CSS Class: orange-dark

    Orange Dark: #bf5700

    <p class="orange-dark">
    Orange Dark: #bf5700
</p>
  • .green
    CSS Class: green

    Green: #626e25

    <p class="green">
    Green: #626e25
</p>
  • .green-light
    CSS Class: green-light

    Green Light: #c2ca95

    <p class="green-light">
    Green Light: #c2ca95
</p>
  • .green-dark
    CSS Class: green-dark

    Green Dark: #414823

    <p class="green-dark">
    Green Dark: #414823
</p>
  • .black
    CSS Class: black

    Black: #000000

    <p class="black">
    Black: #000000
</p>
  • .gray-1
    CSS Class: gray-1

    Gray 1: #111111

    <p class="gray-1">
    Gray 1: #111111
</p>
  • .gray-2
    CSS Class: gray-2

    Gray 2: #222222

    <p class="gray-2">
    Gray 2: #222222
</p>
  • .gray-3
    CSS Class: gray-3

    Gray 3: #333333

    <p class="gray-3">
    Gray 3: #333333
</p>
  • .gray-4
    CSS Class: gray-4

    Gray 4: #444444

    <p class="gray-4">
    Gray 4: #444444
</p>
  • .gray-5
    CSS Class: gray-5

    Gray 5: #555555

    <p class="gray-5">
    Gray 5: #555555
</p>
  • .gray-6
    CSS Class: gray-6

    Gray 6: #666666

    <p class="gray-6">
    Gray 6: #666666
</p>
  • .gray-7
    CSS Class: gray-7

    Gray 7: #777777

    <p class="gray-7">
    Gray 7: #777777
</p>
  • .gray-8
    CSS Class: gray-8

    Gray 8: #888888

    <p class="gray-8">
    Gray 8: #888888
</p>
  • .gray-9
    CSS Class: gray-9

    Gray 9: #999999

    <p class="gray-9">
    Gray 9: #999999
</p>
  • .gray-a
    CSS Class: gray-a

    Gray A: #aaaaaa

    <p class="gray-a">
    Gray A: #aaaaaa
</p>
  • .gray-b
    CSS Class: gray-b

    Gray B: #bbbbbb

    <p class="gray-b">
    Gray B: #bbbbbb
</p>
  • .gray-c
    CSS Class: gray-c

    Gray C: #cccccc

    <p class="gray-c">
    Gray C: #cccccc
</p>
  • .gray-d
    CSS Class: gray-d

    Gray D: #dddddd

    <p class="gray-d">
    Gray D: #dddddd
</p>
  • .gray-e
    CSS Class: gray-e

    Gray D: #eeeeee

    <p class="gray-e">
    Gray D: #eeeeee
</p>
  • .white
    CSS Class: white

    White: #ffffff

    <p class="white">
    White: #ffffff
</p>
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
  • .red-bg
    CSS Class: red-bg
    UTMB Red: #da1f12
    <div class="red-bg">
    UTMB Red: #da1f12
</div>
  • .gray-bg
    CSS Class: gray-bg
    UTMB Gray: #444444
    <div class="gray-bg">
    UTMB Gray: #444444
</div>
  • .gray-light-bg
    CSS Class: gray-light-bg
    Gray Light: #c9cac8
    <div class="gray-light-bg">
    Gray Light: #c9cac8
</div>
  • .gray-mid-bg
    CSS Class: gray-mid-bg
    Gray Mid: #767676
    <div class="gray-mid-bg">
    Gray Mid: #767676
</div>
  • .gray-dark-bg
    CSS Class: gray-dark-bg
    Gray Dark: #111111
    <div class="gray-dark-bg">
    Gray Dark: #111111
</div>
  • .black-bg
    CSS Class: black-bg
    Black: #000000
    <div class="black-bg">
    Black: #000000
</div>
  • .blue-bg
    CSS Class: blue-bg
    Blue: #1b5196
    <div class="blue-bg">
    Blue: #1b5196
</div>
  • .blue-light-bg
    CSS Class: blue-light-bg
    Blue Light: #c0e1ed
    <div class="blue-light-bg">
    Blue Light: #c0e1ed
</div>
  • .blue-dark-bg
    CSS Class: blue-dark-bg
    Blue Dark: #1c3a56
    <div class="blue-dark-bg">
    Blue Dark: #1c3a56
</div>
  • .teal-bg
    CSS Class: teal-bg
    Teal: #457A82
    <div class="teal-bg">
    Teal: #457A82
</div>
  • .teal-light-bg
    CSS Class: teal-light-bg
    Teal Light: #c4e1de
    <div class="teal-light-bg">
    Teal Light: #c4e1de
</div>
  • .teal-dark-bg
    CSS Class: teal-dark-bg
    Teal Dark: #005760
    <div class="teal-dark-bg">
    Teal Dark: #005760
</div>
  • .orange-bg
    CSS Class: orange-bg
    Orange: #eba149
    <div class="orange-bg">
    Orange: #eba149
</div>
  • .orange-light-bg
    CSS Class: orange-light-bg
    Orange Light: #f5d7a5
    <div class="orange-light-bg">
    Orange Light: #f5d7a5
</div>
  • .orange-dark-bg
    CSS Class: orange-dark-bg
    Orange Dark: #bf5700
    <div class="orange-dark-bg">
    Orange Dark: #bf5700
</div>
  • .green-bg
    CSS Class: green-bg
    Green: #626e25
    <div class="green-bg">
    Green: #626e25
</div>
  • .green-light-bg
    CSS Class: green-light-bg
    Green Light: #c2ca95
    <div class="green-light-bg">
    Green Light: #c2ca95
</div>
  • .green-dark-bg
    CSS Class: green-dark-bg
    Green Dark: #414823
    <div class="green-dark-bg">
    Green Dark: #414823
</div>
  • .white-bg
    CSS Class: white-bg
    White: #ffffff
    <div class="white-bg">
    White: #ffffff
</div>
  • .gray-1-bg
    CSS Class: gray-1-bg
    Gray 1: #111111
    <div class="gray-1-bg">
    Gray 1: #111111
</div>
  • .gray-2-bg
    CSS Class: gray-2-bg
    Gray 2: #222222
    <div class="gray-2-bg">
    Gray 2: #222222
</div>
  • .gray-3-bg
    CSS Class: gray-3-bg
    Gray 3: #333333
    <div class="gray-3-bg">
    Gray 3: #333333
</div>
  • .gray-4-bg
    CSS Class: gray-4-bg
    Gray 4: #444444
    <div class="gray-4-bg">
    Gray 4: #444444
</div>
  • .gray-5-bg
    CSS Class: gray-5-bg
    Gray 5: #555555
    <div class="gray-5-bg">
    Gray 5: #555555
</div>
  • .gray-6-bg
    CSS Class: gray-6-bg
    Gray 6: #666666
    <div class="gray-6-bg">
    Gray 6: #666666
</div>
  • .gray-7-bg
    CSS Class: gray-7-bg
    Gray 7: #777777
    <div class="gray-7-bg">
    Gray 7: #777777
</div>
  • .gray-8-bg
    CSS Class: gray-8-bg
    Gray 8: #888888
    <div class="gray-8-bg">
    Gray 8: #888888
</div>
  • .gray-9-bg
    CSS Class: gray-9-bg
    Gray 9: #999999
    <div class="gray-9-bg">
    Gray 9: #999999
</div>
  • .gray-a-bg
    CSS Class: gray-a-bg
    Gray A: #aaaaaa
    <div class="gray-a-bg">
    Gray A: #aaaaaa
</div>
  • .gray-b-bg
    CSS Class: gray-b-bg
    Gray B: #bbbbbb
    <div class="gray-b-bg">
    Gray B: #bbbbbb
</div>
  • .gray-c-bg
    CSS Class: gray-c-bg
    Gray C: #cccccc
    <div class="gray-c-bg">
    Gray C: #cccccc
</div>
  • .gray-d-bg
    CSS Class: gray-d-bg
    Gray D: #dddddd
    <div class="gray-d-bg">
    Gray D: #dddddd
</div>
  • .gray-e-bg
    CSS Class: gray-e-bg
    Gray E: #eeeeee
    <div class="gray-e-bg">
    Gray E: #eeeeee
</div>
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
  • .bg-gradiant
    CSS Class: bg-gradiant
    Example Using: .red-bg
    <div class="red-bg bg-gradiant">
    Example Using: .red-bg
</div>
  • .bg-gradiant-horizontal
    CSS Class: bg-gradiant-horizontal
    Example Using: .red-bg
    <div class="red-bg bg-gradiant-horizontal">
    Example Using: .red-bg
</div>
  • .bg-gradiant-diagonal
    CSS Class: bg-gradiant-diagonal
    Example Using: .red-bg
    <div class="red-bg bg-gradiant-diagonal">
    Example Using: .red-bg
</div>
  • .bg-gradiant-bright
    CSS Class: bg-gradiant-bright
    Example Using: .red-bg
    <div class="red-bg bg-gradiant-bright">
    Example Using: .red-bg
</div>
  • .bg-gradiant-bright-horizontal
    CSS Class: bg-gradiant-bright-horizontal
    Example Using: .red-bg
    <div class="red-bg bg-gradiant-bright-horizontal">
    Example Using: .red-bg
</div>
  • .bg-gradiant-bright-diagonal
    CSS Class: bg-gradiant-bright-diagonal
    Example Using: .red-bg
    <div class="red-bg bg-gradiant-bright-diagonal">
    Example Using: .red-bg
</div>

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
  • .bg-pattern-topo-white
    CSS Class: bg-pattern-topo-white
    Example Using: .teal-bg .bg-pattern-topo-white
    <div class="teal-bg bg-pattern-topo-white">
    <div class="utmb-card-small">Example Using: .bg-teal .bg-pattern-topo-white</div>
</div>
  • .bg-pattern-topo-teal
    CSS Class: bg-pattern-topo-teal
    Example Using: .bg-pattern-topo-teal
    <div class="bg-pattern-topo-teal">
    <div class="utmb-card-small">Example Using: .bg-pattern-topo-teal</div>
</div>
  • .bg-pattern-topo-teal-light
    CSS Class: bg-pattern-topo-teal-light
    Example Using: .teal-dark-bg .bg-pattern-topo-teal-light
    <div class="teal-dark-bg bg-pattern-topo-teal-light">
    <div class="utmb-card-small">Example Using: .teal-dark-bg .bg-pattern-topo-teal-light</div>
</div>
  • .bg-pattern-topo-teal-dark
    CSS Class: bg-pattern-topo-teal-dark
    Example Using: .bg-pattern-topo-teal-dark
    <div class="bg-pattern-topo-teal-dark">
    <div class="utmb-card-small">Example Using: .bg-pattern-topo-teal-dark</div>
</div>
  • .bg-pattern-topo-blue
    CSS Class: bg-pattern-topo-blue
    Example Using: .bg-pattern-topo-blue
    <div class="bg-pattern-topo-blue">
    <div class="utmb-card-small">Example Using: .bg-pattern-topo-blue</div>
</div>
  • .bg-pattern-topo-blue-light
    CSS Class: bg-pattern-topo-blue-light
    Example Using: .blue-dark-bg .bg-pattern-topo-blue-light
    <div class="blue-dark-bg bg-pattern-topo-blue-light">
    <div class="utmb-card-small">Example Using: .blue-dark-bg .bg-pattern-topo-blue-light</div>
</div>
  • .bg-pattern-topo-blue-dark
    CSS Class: bg-pattern-topo-blue-dark
    Example Using: .bg-pattern-topo-blue-dark
    <div class="bg-pattern-topo-blue-dark">
    <div class="utmb-card-small">Example Using: .bg-pattern-topo-blue-dark</div>
</div>
  • .bg-pattern-topo-gray
    CSS Class: bg-pattern-topo-gray
    Example Using: .bg-pattern-topo-gray
    <div class="bg-pattern-topo-gray">
    <div class="utmb-card-small">Example Using: .bg-pattern-topo-gray</div>
</div>
  • .bg-pattern-topo-gray-light
    CSS Class: bg-pattern-topo-gray-light
    Example Using: .bg-pattern-topo-gray-light
    <div class="bg-pattern-topo-gray-light">
    <div class="utmb-card-small">Example Using: .bg-pattern-topo-gray-light</div>
</div>
  • .bg-pattern-topo-gray-dark
    CSS Class: bg-pattern-topo-gray-dark
    Example Using: .bg-pattern-topo-gray-dark
    <div class="bg-pattern-topo-gray-dark">
    <div class="utmb-card-small">Example Using: .bg-pattern-topo-gray-dark</div>
</div>
Typography

Useful basic typography helper classes applied to HTML elements.

UTMB Web: Typography

Expand All Collapse All
  • .serif
    CSS Class: serif

    Serif

    <p class="serif">
    Serif
</p>
  • .sans-serif
    CSS Class: sans-serif

    Sans-Serif

    <p class="sans-serif">
    Sans-Serif
</p>
  • .condensed
    CSS Class: condensed

    Condensed

    <p class="condensed">
    Condensed
</p>
  • .monospace
    CSS Class: monospace

    Monospace

    <p class="monospace">
    Monospace
</p>
  • .h1
    CSS Class: h1

    h1 font-size

    <p class="h1">
    h1 font-size
</p>
  • .h2
    CSS Class: h2

    h2 font-size

    <p class="h2">
    h2 font-size
</p>
  • .h3
    CSS Class: h3

    h3 font-size

    <p class="h3">
    h3 font-size
</p>
  • .h4
    CSS Class: h4

    h4 font-size

    <p class="h4">
    h4 font-size
</p>
  • .h5
    CSS Class: h5

    h5 font-size

    <p class="h5">
    h5 font-size
</p>
  • .h6
    CSS Class: h6

    h6 font-size

    <p class="h6">
    h6 font-size
</p>
  • .subtitle
    CSS Class: subtitle

    Headline Title Subtitle

    <h1>
    Headline Title 
    <span class="subtitle">
        Subtitle
    </span>
</h1>
  • .lead
    CSS Class: lead

    Lead paragraph

    <p class="lead">
    Lead paragraph
</p>
  • .text-left
    CSS Class: text-left

    Text w/ Left Alignment (default)

    <p class="text-left">
    Lead paragraph
</p>
  • .text-center
    CSS Class: text-center

    Text w/ Center Alignment

    <p class="text-center">
    Text w/ Center Alignment
</p>
  • .text-right
    CSS Class: text-right

    Text w/ Right Alignment

    <p class="text-right">
    Text w/ Right Alignment
</p>
  • .text-decoration-none
    CSS Class: text-decoration-none

    Text Decoration None

    <p class="text-decoration-none">
    Text Decoration None
</p>
  • .text-decoration-underline
    CSS Class: text-decoration-underline

    Text Decoration Underline

    <p class="text-decoration-underline">
    Text Decoration None
</p>
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
  • Hyperlink & Button (defaults)
    Default Hyperlink & Button
    I'm a hyperlink   
    <a href="#" title="">
    I'm a hyperlink
</a>

<button>
    I'm a button
</button>
  • .btn-link
    CSS Class: btn btn-link
    I'm a hyperlink   
    <a class="btn btn-link" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-link">
    I'm a button
</button>
  • .btn-text
    CSS Class: btn btn-text
    I'm a hyperlink   
    <a class="btn btn-text" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-text">
    I'm a button
</button>
  • .btn-red
    CSS Class: btn btn-red
    I'm a hyperlink   
    <a class="btn btn-red" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-red">
    I'm a button
</button>
  • .btn-gray
    CSS Class: btn btn-gray
    I'm a hyperlink   
    <a class="btn btn-gray" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-gray">
    I'm a button
</button>
  • .btn-gray-light
    CSS Class: btn btn-gray-light
    I'm a hyperlink   
    <a class="btn btn-gray-light" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-gray-light">
    I'm a button
</button>
  • .btn-white
    CSS Class: btn btn-white
    I'm a hyperlink   
    <a class="btn btn-white" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-white">
    I'm a button
</button>
  • .btn-black
    CSS Class: btn btn-black
    I'm a hyperlink   
    <a class="btn btn-black" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-gray-black">
    I'm a button
</button>
  • .btn-blue
    CSS Class: btn btn-blue
    I'm a hyperlink   
    <a class="btn btn-blue" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-blue">
    I'm a button
</button>
  • .btn-orange
    CSS Class: btn btn-orange
    I'm a hyperlink   
    <a class="btn btn-orange" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-orange">
    I'm a button
</button>
  • .btn-green
    CSS Class: btn btn-green
    I'm a hyperlink   
    <a class="btn btn-green" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-green">
    I'm a button
</button>
  • .btn-purple
    CSS Class: btn btn-purple
    I'm a hyperlink   
    <a class="btn btn-purple" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-purple">
    I'm a button
</button>
  • .btn-teal
    CSS Class: btn btn-gray-teal
    I'm a hyperlink   
    <a class="btn btn-teal" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-teal">
    I'm a button
</button>
  • .btn-coolgray3
    CSS Class: btn btn-coolgray3
    I'm a hyperlink   
    <a class="btn btn-coolgray3" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-coolgray3">
    I'm a button
</button>
  • .btn-default
    CSS Class: btn btn-default
    I'm a hyperlink   
    <a class="btn btn-default" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-default">
    I'm a button
</button>
  • .btn-primary
    CSS Class: btn btn-primary
    I'm a hyperlink   
    <a class="btn btn-primary" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-primary">
    I'm a button
</button>
  • .btn-secondary
    CSS Class: btn btn-secondary
    I'm a hyperlink   
    <a class="btn btn-secondary" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-secondary">
    I'm a button
</button>
  • .btn-info
    CSS Class: btn btn-info
    I'm a hyperlink   
    <a class="btn btn-info" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-info">
    I'm a button
</button>
  • .btn-danger
    CSS Class: btn btn-danger
    I'm a hyperlink   
    <a class="btn btn-danger" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-danger">
    I'm a button
</button>
  • .btn-warning
    CSS Class: btn btn-warning
    I'm a hyperlink   
    <a class="btn btn-warning" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-warning">
    I'm a button
</button>
  • .btn-success
    CSS Class: btn btn-success
    I'm a hyperlink   
    <a class="btn btn-success" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-success">
    I'm a button
</button>
  • .btn-large
    CSS Class: btn btn-large
    I'm a hyperlink   
    <a class="btn btn-large" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-large">
    I'm a button
</button>
  • .btn-small
    CSS Class: btn btn-small
    I'm a hyperlink   
    <a class="btn btn-small" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-small">
    I'm a button
</button>
  • .btn-block
    CSS Class: btn btn-block
    I'm a hyperlink 
    <a class="btn btn-block" href="#" title="">
    I'm a hyperlink
</a>

<button class="btn btn-block">
    I'm a button
</button>
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
  • .photo
    CSS Class: photo
    Photo placeholder
    <img class="photo" src="" title="" alt="">
  • .photo-left
    CSS Class: photo-left
    My Photo

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.

    Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.

    <img class="photo-left" src="" title="" alt="" />
<img class="photo-left-caption" src="" title="My Caption" alt="" />

    *TIP: You can optionally include an image caption (from the image's title attribute) by using the photo-left-caption class instead of the photo-left class seen in the example.

  • .photo-right
    CSS Class: photo-right
    My Photo

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.

    Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.

    <img class="photo-right" src="" title="" alt="" />
<img class="photo-right-caption" src="" title="My Caption" alt="" />

    *TIP: You can optionally include an image caption (from the image's title attribute) by using the photo-right-caption class instead of the photo-right class seen in the example.

  • .img-thumbnail
    CSS Class: img-thumbnail
    ...
    <img class="img-thumbnail" src="" title="" alt="" />
  • .img-rounded
    CSS Class: img-rounded
    ...
    <img class="img-rounded" src="" title="" alt="" />
  • .img-circle
    CSS Class: img-circle
    ...
    <img class="img-circle" src="" title="" alt="" />
  • .img-pill
    CSS Class: img-pill
    ...
    <img class="img-pill" src="" title="" alt="" />
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
  • Ordered & Unordered List (Defaults)
    Default(s)
    1. Ordered list item 1
    2. Ordered list item 2
      1. Child ordered list item 1
      2. Child ordered list item 2
    3. Ordered list item 3

    • Unordered list item 1
    • Unordered list item 2
      • Child unordered list item 1
      • Child unordered list item 2
    • Unordered list item 3
    <ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2
        <ol>
            <li<Child ordered list item 1</li>
            <li<Child ordered list item 2</li>
        </ol>
    </li>
    <li>Ordered list item 3</li>
</ol>

<ul>
    <li>Unordered list item 1</li>
    <li<Unordered list item 2
        <ul>
            <li>Child unordered list item 1</li>
            <li>Child unordered list item 2</li>
        </ul>
    </li>
    <li>Unordered list item 3</li>
</ul>
  • .list
    CSS Class: list
    • List item 1
    • List item 2
    • List item 3
    <ul class="list">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
  • .list-numbered
    CSS Class: list list-numbered
    • List item 1
    • List item 2
    • List item 3
    <ul class="list list-numbered">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
  • .list-bullet
    CSS Class: list list-bullet
    • List item 1
    • List item 2
    • List item 3
    <ul class="list list-bullet">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
  • .list-divider
    CSS Class: list list-divider
    • List item 1
    • List item 2
    • List item 3
    <ul class="list list-divider">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
  • .list-striped
    CSS Class: list list-striped
    • List item 1
    • List item 2
    • List item 3
    <ul class="list list-striped">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
  • .list-large
    CSS Class: list list-large
    • List item 1
    • List item 2
    • List item 3
    <ul class="list list-large">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
  • .list-small
    CSS Class: list list-small
    • List item 1
    • List item 2
    • List item 3
    <ul class="list list-small">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
  • Description List (Default)
    Default
    Description lists
    A description list defines terms and their corresponding descriptions.
    This is a term
    This is a description.
    This is a term
    This is a description.
    <dl>
    <dt>Description lists</dt>
    <dd>A description list defines terms and their corresponding descriptions.</dd>
    <dt>This is a term</dt>
    <dd>This is a description.</dd>
    <dt>This is a term</dt>
    <dd>This is a description.</dd>
</dl>
  • Description List: Inline
    CSS Class: list-inline dt-right
    Description lists
    A description list defines terms and their corresponding descriptions.
    This is a term
    This is a description.
    This is a term
    This is a description.
    <dl class="list-inline dt-right">
    <dt>Description lists</dt>
    <dd>A description list defines terms and their corresponding descriptions.</dd>
    <dt>This is a term</dt>
    <dd>This is a description.</dd>
    <dt>This is a term</dt>
    <dd>This is a description.</dd>
</dl>
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
  • Alert (Default)
    Default

    This is an example of an alert. 

    <p class="alert">
    This is an example of an alert.
</p>
  • .alert-primary
    CSS Class: alert-primary

    This is an example of a primary alert. 

    <p class="alert alert-primary">
    This is an example of a primary alert.
</p>
  • .alert-secondary
    CSS Class: alert-secondary

    This is an example of a secondary alert. 

    <p class="alert alert-secondary">
    This is an example of a secondary alert.
</p>
  • .alert-info
    CSS Class: alert-info

    This is an example of an info alert. 

    <p class="alert alert-info">
    This is an example of an info alert.
</p>
  • .alert-danger
    CSS Class: alert-danger

    This is an example of a danger alert. 

    <p class="alert alert-danger">
    This is an example of a danger alert.
</p>
  • .alert-warning
    CSS Class: alert-warning

    This is an example of a warning alert. 

    <p class="alert alert-warning">
    This is an example of a warning alert.
</p>
  • .alert-success
    CSS Class: alert-success

    This is an example of a success alert. 

    <p class="alert alert-success">
    This is an example of a success alert.
</p>
  • .alert-light
    CSS Class: alert-light

    This is an example of a light alert. 

    <p class="alert alert-light">
    This is an example of a light alert.
</p>
  • .alert-dark
    CSS Class: alert-dark

    This is an example of a dark alert. 

    <p class="alert alert-dark">
    This is an example of a dark alert.
</p>
  • Alert w/ Close Button (Interactive)
    Alert w/ Close Button (Ineractive)
    An interactive alert w/ close button.
    <div class="alert alert-danger" uk-alert="true">
    <a class="uk-alert-close" uk-close="true"></a>
    <div>An interactive alert w/ close button.</div>
</div>
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
  • .well
    CSS Class: well & callout
    Hi, I'm a well.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    Well w/ Callout.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    <div class="well">
    ...
</div>

<div class="well callout">
    ...
</div>
  • .well-red
    CSS Class: well well-red & callout
    Hi, I'm a well.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    Well w/ Callout.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    <div class="well well-red">
    ...
</div>

<div class="well well-red callout">
    ...
</div>
  • .well-gray
    CSS Class: well well-gray & callout
    Hi, I'm a well.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    Well w/ Callout.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    <div class="well well-gray">
    ...
</div>

<div class="well well-gray callout">
    ...
</div>
  • .well-blue
    CSS Class: well well-blue & callout
    Hi, I'm a well.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    Well w/ Callout.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    <div class="well well-blue">
    ...
</div>

<div class="well well-blue callout">
    ...
</div>
  • .well-green
    CSS Class: well well-green & callout
    Hi, I'm a well.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    Well w/ Callout.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    <div class="well well-green">
    ...
</div>

<div class="well well-green callout">
    ...
</div>
  • .well-orange
    CSS Class: well well-orange & callout
    Hi, I'm a well.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    Well w/ Callout.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    <div class="well well-orange">
    ...
</div>

<div class="well well-orange callout">
    ...
</div>
  • .well-teal
    CSS Class: well well-teal & callout
    Hi, I'm a well.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    Well w/ Callout.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    <div class="well well-teal">
    ...
</div>

<div class="well well-teal callout">
    ...
</div>
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
  • .panel
    CSS Class: panel & callout

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>


<div class="panel callout">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .panel-red
    CSS Class: panel panel-red & callout

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel panel-red">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>


<div class="panel panel-red callout">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .panel-gray
    CSS Class: panel panel-gray & callout

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel panel-gray">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>


<div class="panel panel-gray callout">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .panel-blue
    CSS Class: panel panel-blue & callout

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel panel-blue">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>


<div class="panel panel-blue callout">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .panel-green
    CSS Class: panel panel-green & callout

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel panel-green">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>


<div class="panel panel-green callout">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .panel-teal
    CSS Class: panel panel-teal & callout

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel panel-teal">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>


<div class="panel panel-teal callout">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .panel-default
    CSS Class: panel panel-default

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .panel-primary
    CSS Class: panel panel-primary

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .panel-secondary
    CSS Class: panel panel-secondary

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel panel-secondary">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .panel-info
    CSS Class: panel panel-info

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .panel-danger
    CSS Class: panel panel-danger

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .panel-warning
    CSS Class: panel panel-warning

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .panel-success
    CSS Class: panel panel-success

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .title-hide
    CSS Class: panel & title-hide

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel title-hide">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
  • .footer-hide
    CSS Class: panel & footer-hide

    Hi, I'm a panel.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

    I'm a panel footer.
    <div class="panel footer-hide">
    <div class="panel-heading">
        <h3 class="panel-title">Hi, I'm a panel.</h3>
    </div>
    <div class="panel-body">
        <p>
            Lorem ipsum dolor sit amet,
            <a href="#" title="">consectetur</a> 
            adipiscing elit. <strong>Donec ut eleifend neque</strong>.
        </p>
    </div>
    <div class="panel-footer">
        I'm a panel footer.
    </div>
</div>
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
  • Table (Default)
    Default
    Table Heading Table Heading Table Heading
    Table Data Table Data Table Data
    Table Data Table Data Table Data 
    <table>
    <thead>
	<tr>
	   <th>Table Heading/th>
	   <th>Table Heading/th>
	   <th>Table Heading/th>
	</tr>
    </thead>
    <tbody>
	<tr>
	   <th>Table Data/th>
	   <th>Table Data/th>
	   <th>Table Data/th>
	</tr>
	<tr>
	   <th>Table Data/th>
	   <th>Table Data/th>
	   <th>Table Data/th>
	</tr>
    </tbody>
</table>
  • .table-divider
    CSS Class: table-divider
    Table Heading Table Heading Table Heading
    Table Data Table Data Table Data
    Table Data Table Data Table Data 
    <table class="table-divider">
    <thead>
	<tr>
	   <th>Table Heading/th>
	   <th>Table Heading/th>
	   <th>Table Heading/th>
	</tr>
    </thead>
    <tbody>
	<tr>
	   <th>Table Data/th>
	   <th>Table Data/th>
	   <th>Table Data/th>
	</tr>
	<tr>
	   <th>Table Data/th>
	   <th>Table Data/th>
	   <th>Table Data/th>
	</tr>
    </tbody>
</table>
  • .table-striped
    CSS Class: table-striped
    Table Heading Table Heading Table Heading
    Table Data Table Data Table Data
    Table Data Table Data Table Data 
    <table class="table-striped">
    <thead>
	<tr>
	   <th>Table Heading/th>
	   <th>Table Heading/th>
	   <th>Table Heading/th>
	</tr>
    </thead>
    <tbody>
	<tr>
	   <th>Table Data/th>
	   <th>Table Data/th>
	   <th>Table Data/th>
	</tr>
	<tr>
	   <th>Table Data/th>
	   <th>Table Data/th>
	   <th>Table Data/th>
	</tr>
    </tbody>
</table>
  • .table-hover
    CSS Class: table-hover
    Table Heading Table Heading Table Heading
    Table Data Table Data Table Data
    Table Data Table Data Table Data 
    <table class="table-hover">
    <thead>
	<tr>
	   <th>Table Heading/th>
	   <th>Table Heading/th>
	   <th>Table Heading/th>
	</tr>
    </thead>
    <tbody>
	<tr>
	   <th>Table Data/th>
	   <th>Table Data/th>
	   <th>Table Data/th>
	</tr>
	<tr>
	   <th>Table Data/th>
	   <th>Table Data/th>
	   <th>Table Data/th>
	</tr>
    </tbody>
</table>
  • .table-small
    CSS Class: table-small
    Table Heading Table Heading Table Heading
    Table Data Table Data Table Data
    Table Data Table Data Table Data 
    <table class="table-small">
    <thead>
	<tr>
	   <th>Table Heading/th>
	   <th>Table Heading/th>
	   <th>Table Heading/th>
	</tr>
    </thead>
    <tbody>
	<tr>
	   <th>Table Data/th>
	   <th>Table Data/th>
	   <th>Table Data/th>
	</tr>
	<tr>
	   <th>Table Data/th>
	   <th>Table Data/th>
	   <th>Table Data/th>
	</tr>
    </tbody>
</table>
Design Elements

Various reusable UTMB styled design styles.

UTMB Web: Design Elements

Expand All Collapse All
  • .utmb-page-title
    CSS Class: utmb-page-title

    UTMB Page Title: Example 

    <div class="utmb-page-title">
    <h2>
        UTMB Page Title: <strong class="red">Example</strong>
    </h2>
</div>
  • .utmb-section-title
    CSS Class: utmb-section-title

    UTMB Section Title: Example

    This is an example of the UTMB Section Title.

    <div class="utmb-section-title">
    <h3>
        UTMB Section Title: <strong>Example</strong>
    </h3>
    <p>
        This is an example of the UTMB Section Title.
    </p>
</div>
  • .utmb-section-subtitle
    CSS Class: utmb-section-subtitle

    UTMB Section Subtitle: Example

    CSS Classes: utmb-section-subtitle 
    <div class="utmb-section-subtitle">
    <h4>
        UTMB Section Subtitle: <strong>Example</strong>
    </h4>
    <small>
        CSS Classes: <code>utmb-section-subtitle</code>
    </small>
</div>
  • .utmb-heading-bullet
    CSS Class: utmb-heading-bullet

    UTMB Heading Bullet: Example 

    <h3 class="utmb-heading-bullet">
    UTMB Heading Bullet: <strong>Example</strong>
</h3>
  • .utmb-lead
    CSS Class: utmb-lead

    UTMB Lead Paragraph Example. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. 

    <p class="utmb-lead">
    UTMB Lead Paragraph <strong>Example</strong>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
</p>
  • .utmb-card
    CSS Class: utmb-card

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. 

    <p class="utmb-card">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
</p>
  • .utmb-card-small
    CSS Class: utmb-card-small

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. 

    <p class="utmb-card-small">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
</p>
  • .utmb-card-base
    CSS Class: utmb-card-base

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. 

    <p class="utmb-card-base">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
</p>
  • .social-icons
    CSS Class: social-icons
    <div class="social-icons">
    <a class="icon-facebook" href="https://www.facebook.com/UTMB.edu" 
        title="Follow UTMB on Facebook">UTMB on Facebook</a>
    <a class="icon-twitter" href="https://twitter.com/utmbhealth/" 
        title="Follow UTMB on Twitter">UTMB on Twitter</a>
    <a class="icon-flickr" href="https://www.instagram.com/utmbhealth/" 
        title="Follow UTMB on Instagram">UTMB on Instagram</a>
    <a class="icon-youtube" href="http://www.youtube.com/UTMBGalveston" 
        title="Follow UTMB on YouTube">UTMB on YouTube</a>
    <a class="icon-rss" href="http://www.utmb.edu/newsroom/rss/TopStories.aspx" 
        title="Subscribe to the UTMB Newsroom RSS Feeds">UTMB Newsroom RSS Feeds</a>
</div>
  • .top-links
    CSS Class: top-links
    <div class="top-links">
    <a href="#" title="First Link">Link One</a> |
    <a href="#" title="Second Link">Link Two</a> |
    <a href="#" title="Third Link">Link Three</a>
</div>
  • .bot-links
    CSS Class: bot-links
    <div class="bot-links">
    <a href="#" title="First Link">Link One</a> |
    <a href="#" title="Second Link">Link Two</a> |
    <a href="#" title="Third Link">Link Three</a>
</div>
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
  • .sr-only
    CSS Class: sr-only

    The paragraph below is only seen by screenreaders.

    You cant see me, but screenreaders can. :) 

    <p>
    The paragraph below is only seen by screenreaders.   
</p>
<p class="sr-only">
    You cant see me, but screenreaders can. :)
</p>
  • .display-block
    CSS Class: display-block
    Display Block 
    <div class="display-block">
    Display Block  
</div>
  • .display-inline
    CSS Class: display-inline
    Display Block 
    <div class="display-inline">
    Display Block  
</div>
  • .display-inline-block
    CSS Class: display-inline-block
    Display Inline Block 
    <div class="display-inline-block">
    Display Inline Block  
</div>
  • .float-left
    CSS Class: float-left
    Float Left

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.

    <div class="float-left">
    Float Left  
</div>
<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.  
</p>
  • .float-right
    CSS Class: float-right
    Float Left

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.

    <div class="float-right">
    Float Left  
</div>
<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.  
</p>
  • .clear-float
    CSS Class: clear-float
    Clear (Stop) Float

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.

    <div class="clear-float">
    Clear (Stop) Float  
</div>
<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.  
</p>
  • .no-print
    CSS Class: no-print

    The paragraph below will not print from the browser.

    I will not print. :) 

    <p>
    The paragraph below will not print from the browser.
</p>
<p class="no-print">
    I will not print. :)  
</p>
  • .padding-0 - .padding-150 (increments of 5)
    CSS Class: padding-*
    Padding Example: padding-100 
    <div class="padding-100">
    Padding Example: <code>padding-100</code>
</div>
  • .padding-top-0 - .padding-top-150 (increments of 5)
    CSS Class: padding-top-*
    Padding Top Example: padding-top-100 
    <div class="padding-top-100">
    Padding Top Example: <code>padding-top-100</code>
</div>
  • .padding-right-0 - .padding-right-150 (increments of 5)
    CSS Class: padding-right-*
    Padding Right Example: padding-right-100 
    <div class="padding-right-100">
    Padding Right Example: <code>padding-right-100</code>
</div>
  • .padding-bottom-0 - .padding-bottom-150 (increments of 5)
    CSS Class: padding-bottom-*
    Padding Bottom Example: padding-bottom-100 
    <div class="padding-bottom-100">
    Padding Bottom Example: <code>padding-bottom-100</code>
</div>
  • .padding-left-0 - .padding-left-150 (increments of 5)
    CSS Class: padding-left-*
    Padding Class(es) Example: padding-left-100 
    <div class="padding-left-100">
    Padding Class(es) Example: <code>padding-left-100</code>
</div>
  • .margin-0 - .margin-150 (increments of 5)
    CSS Class: margin-*
    Margin Class(es) Example: margin-100 
    <div class="margin-100">
    Margin Class(es) Example: <code>margin-100</code>
</div>
  • .margin-top-0 - .margin-top-150 (increments of 5)
    CSS Class: margin-top-*
    Margin Top Example: margin-top-100 
    <div class="margin-top-100">
    Margin Top Example: <code>margin-top-100</code>
</div>
  • .margin-right-0 - .margin-right-150 (increments of 5)
    CSS Class: margin-right-*
    Margin Right Example: margin-right-100 
    <div class="margin-right-100">
    Margin Right Example: <code>margin-right-100</code>
</div>
  • .margin-bottom-0 - .margin-bottom-150 (increments of 5)
    CSS Class: margin-bottom-*
    Margin Bottom Example: margin-bottom-100 
    <div class="margin-bottom-100">
    Margin Bottom Example: <code>margin-bottom-100</code>
</div>
  • .margin-left-0 - .margin-left-150 (increments of 5)
    CSS Class: margin-left-*
    Margin Left Example: margin-left-100 
    <div class="margin-left-100">
    Margin Left Example: <code>margin-left-100</code>
</div>

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
  • Blogs Post List (Default)
    Blog Post List (Default)

    • Some important reminders for tumultuous times

      Social media is reshaping our society, and it has significant benefits and potential risks. At UTMB Health, we have policies and rules governing social media use for department and program sites, as well as for personal accounts and pages on platforms such as Facebook, Twitter, Instagram, LinkedIn and others. If you're on social media, you should be familiar with these guidelines...

      Read more
    • slide-01

      Ladies and gentlemen, we have blogs...

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et velit sed tellus fringilla hendrerit. Nullam hendrerit urna id justo tempor, eu sodales dui sodales. Vivamus vel cursus est. Fusce quis metus convallis elit tincidunt rhoncus suscipit vel mi.

      Read more
  • .blog-post-item-divider
    CSS Class: blog-post-item-divider

    • Some important reminders

      Social media is reshaping our society, and it has significant benefits and potential risks. At UTMB Health, we have policies and rules governing social media use for department and program sites, as well as for personal accounts and pages on platforms such as Facebook, Twitter, Instagram, LinkedIn and others. If you're on social media, you should be familiar with these guidelines...

      Read more
    • slide-01

      Ladies and gentlemen, we have blogs...

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et velit sed tellus fringilla hendrerit. Nullam hendrerit urna id justo tempor, eu sodales dui sodales. Vivamus vel cursus est. Fusce quis metus convallis elit tincidunt rhoncus suscipit vel mi.

      Read more
  • .blog-post-item-card
    CSS Class: blog-post-item-divider

    • Some important reminders

      Social media is reshaping our society, and it has significant benefits and potential risks. At UTMB Health, we have policies and rules governing social media use for department and program sites, as well as for personal accounts and pages on platforms such as Facebook, Twitter, Instagram, LinkedIn and others. If you're on social media, you should be familiar with these guidelines...

      Read more
    • slide-01

      Ladies and gentlemen, we have blogs...

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et velit sed tellus fringilla hendrerit. Nullam hendrerit urna id justo tempor, eu sodales dui sodales. Vivamus vel cursus est. Fusce quis metus convallis elit tincidunt rhoncus suscipit vel mi.

      Read more
Events

Sitefinity Events widget UI design classes.

UTMB Sitefinity Widgets: Events (list)

Expand All Collapse All
  • Event List (Default)
    Event List (Default)

    • ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

    • Hello, World! I'm an event

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, Texas 77555 USA

      Maecenas vel hendrerit tortor. Donec metus ligula, fermentum vel porta a, suscipit at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    • ALL Day event - 1 day long (UTMB Web Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Nunc condimentum molestie sem id commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet ac ipsum sit amet congue. Morbi justo tortor, tristique volutpat egestas ut, accumsan vitae tellus. Proin ut turpis massa. Nullam nec mattis arcu, non tempus ipsum. Cras sit amet scelerisque lacus, nec lobortis libero.

  • .event-item-divider
    CSS Class: event-item-divider

    • ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

    • Hello, World! I'm an event

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, Texas 77555 USA

      Maecenas vel hendrerit tortor. Donec metus ligula, fermentum vel porta a, suscipit at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    • ALL Day event - 1 day long (UTMB Web Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Nunc condimentum molestie sem id commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet ac ipsum sit amet congue. Morbi justo tortor, tristique volutpat egestas ut, accumsan vitae tellus. Proin ut turpis massa. Nullam nec mattis arcu, non tempus ipsum. Cras sit amet scelerisque lacus, nec lobortis libero.

  • .event-item-card
    CSS Class: event-item-card

    • ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

    • Hello, World! I'm an event

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, Texas 77555 USA

      Maecenas vel hendrerit tortor. Donec metus ligula, fermentum vel porta a, suscipit at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    • ALL Day event - 1 day long (UTMB Web Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Nunc condimentum molestie sem id commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet ac ipsum sit amet congue. Morbi justo tortor, tristique volutpat egestas ut, accumsan vitae tellus. Proin ut turpis massa. Nullam nec mattis arcu, non tempus ipsum. Cras sit amet scelerisque lacus, nec lobortis libero.

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
  • Expanded List (Default)
    Expanded List (Default)

    Sitefinity List Demo

    • Hello, World! I'm a list item

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et velit sed tellus fringilla hendrerit. Nullam hendrerit urna id justo tempor, eu sodales dui sodales. Vivamus vel cursus est.

    • Who does (List Item) Number 2 work for?

      Nam consequat convallis eleifend. Mauris faucibus metus ut venenatis congue. 

      Suspendisse potenti. Quisque finibus, purus rhoncus scelerisque rhoncus, nisl lectus faucibus augue, aliquam elementum risus ex sed purus.

    • List Item three - w/out hyperlink

      List Item Three!

      Etiam molestie nulla id sagittis convallis. Cras quis metus sit amet metus scelerisque gravida. Donec rutrum tellus sit amet luctus sollicitudin.

    • Jose' Quatro, you are a list item of mine

      Proin id urna posuere, ullamcorper nisi at, auctor ligula. Aenean non aliquam nibh, facilisis mattis libero. Mauris euismod magna euismod pulvinar mollis. Curabitur eu porttitor tellus.
      Curabitur purus quam, finibus eu porta eget, tincidunt vel tellus.
  • .list-divider
    CSS Class: list-divider

    Sitefinity List Demo

    • Hello, World! I'm a list item

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et velit sed tellus fringilla hendrerit. Nullam hendrerit urna id justo tempor, eu sodales dui sodales. Vivamus vel cursus est.

    • Who does (List Item) Number 2 work for?

      Nam consequat convallis eleifend. Mauris faucibus metus ut venenatis congue. 

      Suspendisse potenti. Quisque finibus, purus rhoncus scelerisque rhoncus, nisl lectus faucibus augue, aliquam elementum risus ex sed purus.

    • List Item three - w/out hyperlink

      List Item Three!

      Etiam molestie nulla id sagittis convallis. Cras quis metus sit amet metus scelerisque gravida. Donec rutrum tellus sit amet luctus sollicitudin.

    • Jose' Quatro, you are a list item of mine

      Proin id urna posuere, ullamcorper nisi at, auctor ligula. Aenean non aliquam nibh, facilisis mattis libero. Mauris euismod magna euismod pulvinar mollis. Curabitur eu porttitor tellus.
      Curabitur purus quam, finibus eu porta eget, tincidunt vel tellus.
  • .list-striped
    CSS Class: list-striped

    Sitefinity List Demo

    • Hello, World! I'm a list item

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et velit sed tellus fringilla hendrerit. Nullam hendrerit urna id justo tempor, eu sodales dui sodales. Vivamus vel cursus est.

    • Who does (List Item) Number 2 work for?

      Nam consequat convallis eleifend. Mauris faucibus metus ut venenatis congue. 

      Suspendisse potenti. Quisque finibus, purus rhoncus scelerisque rhoncus, nisl lectus faucibus augue, aliquam elementum risus ex sed purus.

    • List Item three - w/out hyperlink

      List Item Three!

      Etiam molestie nulla id sagittis convallis. Cras quis metus sit amet metus scelerisque gravida. Donec rutrum tellus sit amet luctus sollicitudin.

    • Jose' Quatro, you are a list item of mine

      Proin id urna posuere, ullamcorper nisi at, auctor ligula. Aenean non aliquam nibh, facilisis mattis libero. Mauris euismod magna euismod pulvinar mollis. Curabitur eu porttitor tellus.
      Curabitur purus quam, finibus eu porta eget, tincidunt vel tellus.
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
  • Panel List (Default)
    Panel List (Default)

    Sitefinity List Demo

    Hello, World! I'm a list item

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et velit sed tellus fringilla hendrerit. Nullam hendrerit urna id justo tempor, eu sodales dui sodales. Vivamus vel cursus est.

    Who does (List Item) Number 2 work for?

    Nam consequat convallis eleifend. Mauris faucibus metus ut venenatis congue. 

    Suspendisse potenti. Quisque finibus, purus rhoncus scelerisque rhoncus, nisl lectus faucibus augue, aliquam elementum risus ex sed purus.

    List Item three - w/out hyperlink

    List Item Three!

    Etiam molestie nulla id sagittis convallis. Cras quis metus sit amet metus scelerisque gravida. Donec rutrum tellus sit amet luctus sollicitudin.

    Jose' Quatro, you are a list item of mine

    Proin id urna posuere, ullamcorper nisi at, auctor ligula. Aenean non aliquam nibh, facilisis mattis libero. Mauris euismod magna euismod pulvinar mollis. Curabitur eu porttitor tellus.
    Curabitur purus quam, finibus eu porta eget, tincidunt vel tellus.
  • Panel List + Grid
    CSS Classes(es): list-col-sm-6 + list-equal-height

    Sitefinity List Demo

    Hello, World! I'm a list item

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et velit sed tellus fringilla hendrerit. Nullam hendrerit urna id justo tempor, eu sodales dui sodales. Vivamus vel cursus est.

    Who does (List Item) Number 2 work for?

    Nam consequat convallis eleifend. Mauris faucibus metus ut venenatis congue. 

    Suspendisse potenti. Quisque finibus, purus rhoncus scelerisque rhoncus, nisl lectus faucibus augue, aliquam elementum risus ex sed purus.
  • Panel List Icons + Grid
    CSS Classes(es): list-col-sm-6 + list-equal-height

    Sitefinity List Demo

    List Item 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et velit sed tellus fringilla hendrerit. Nullam hendrerit urna id justo tempor, eu sodales dui sodales. Vivamus vel cursus est.

    List Item 2

    Nam consequat convallis eleifend. Mauris faucibus metus ut venenatis congue. 

    Suspendisse potenti. Quisque finibus, purus rhoncus scelerisque rhoncus, nisl lectus faucibus augue, aliquam elementum risus ex sed purus.
  • Panel List Images + Grid
    CSS Classes(es): list-col-sm-6 + list-equal-height

    Sitefinity List Demo

    List Item 1

    slide-01

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et velit sed tellus fringilla hendrerit. Nullam hendrerit urna id justo tempor, eu sodales dui sodales. Vivamus vel cursus est.

    List Item 2

    slide-02 Nam consequat convallis eleifend. Mauris faucibus metus ut venenatis congue. 

    Suspendisse potenti. Quisque finibus, purus rhoncus scelerisque rhoncus, nisl lectus faucibus augue, aliquam elementum risus ex sed purus.
  • .list-card
    CSS Classes(es): list-card + list-col-sm-6 + list-equal-height

    Sitefinity List Demo

    Hello, World! I'm a list item

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et velit sed tellus fringilla hendrerit. Nullam hendrerit urna id justo tempor, eu sodales dui sodales. Vivamus vel cursus est.

    Who does (List Item) Number 2 work for?

    Nam consequat convallis eleifend. Mauris faucibus metus ut venenatis congue. 

    Suspendisse potenti. Quisque finibus, purus rhoncus scelerisque rhoncus, nisl lectus faucibus augue, aliquam elementum risus ex sed purus.
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
  • Simple List (Default)
    Simple List (Default)

    Sitefinity List Demo

    • Hello, World! I'm a list item
    • Who does (List Item) Number 2 work for?
    • List Item three - w/out hyperlink
    • Jose' Quatro, you are a list item of mine
  • .list-bullet
    CSS Classes: list-bullet

    Sitefinity List Demo

    • Hello, World! I'm a list item
    • Who does (List Item) Number 2 work for?
    • List Item three - w/out hyperlink
    • Jose' Quatro, you are a list item of mine
  • .list-numbered
    CSS Classes: list-numbered

    Sitefinity List Demo

    • Hello, World! I'm a list item
    • Who does (List Item) Number 2 work for?
    • List Item three - w/out hyperlink
    • Jose' Quatro, you are a list item of mine
  • .list-divider
    CSS Classes: list-divider

    Sitefinity List Demo

    • Hello, World! I'm a list item
    • Who does (List Item) Number 2 work for?
    • List Item three - w/out hyperlink
    • Jose' Quatro, you are a list item of mine
  • .list-striped
    CSS Classes: list-striped

    Sitefinity List Demo

    • Hello, World! I'm a list item
    • Who does (List Item) Number 2 work for?
    • List Item three - w/out hyperlink
    • Jose' Quatro, you are a list item of mine
  • .list-large
    CSS Classes: list-large

    Sitefinity List Demo

    • Hello, World! I'm a list item
    • Who does (List Item) Number 2 work for?
    • List Item three - w/out hyperlink
    • Jose' Quatro, you are a list item of mine
  • .list-small
    CSS Classes: list-small

    Sitefinity List Demo

    • Hello, World! I'm a list item
    • Who does (List Item) Number 2 work for?
    • List Item three - w/out hyperlink
    • Jose' Quatro, you are a list item of mine
Lists > Tabs

Sitefinity Tabs List widget UI design classes.

UTMB Sitefinity Widgets: Lists > Tabs

Expand All Collapse All
  • List Tabs (Default)
    List Tabs (Default)

    Sitefinity List Demo - Tabs

    • Panel 1. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut.

    • Panel 2. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut.

    • Panel 3. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus.
  • .tabs-modern
    CSS Class: tabs-modern

    Sitefinity List Demo - Tabs

    • Panel 1. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut.

    • Panel 2. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut.

    • Panel 3. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus.
  • List Tabs Image (Default)
    List Tabs Image (Default)

    Sitefinity List Demo - Tabs

    • slide-02

      Panel 1. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut.

      Nam porttitor quis lacus at scelerisque. Vivamus tristique erat tortor, at fermentum neque lacinia eget. Vestibulum cursus est vitae feugiat facilisis. Aliquam eget porta augue. Etiam tincidunt orci et sem lobortis fermentum. Mauris aliquam, dolor quis congue interdum, neque est lacinia nisi, pellentesque ultricies mauris quam eu neque. Pellentesque ultrices malesuada fermentum. Pellentesque porttitor posuere enim, sed congue mauris tristique eget.
    • slide-03

      Panel 2. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut.

      Nam porttitor quis lacus at scelerisque. Vivamus tristique erat tortor, at fermentum neque lacinia eget. Vestibulum cursus est vitae feugiat facilisis. Aliquam eget porta augue. Etiam tincidunt orci et sem lobortis fermentum. Mauris aliquam, dolor quis congue interdum, neque est lacinia nisi, pellentesque ultricies mauris quam eu neque. Pellentesque ultrices malesuada fermentum. Pellentesque porttitor posuere enim, sed congue mauris tristique eget.
    • slide-05

      Panel 3. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus.

      Nam porttitor quis lacus at scelerisque. Vivamus tristique erat tortor, at fermentum neque lacinia eget. Vestibulum cursus est vitae feugiat facilisis. Aliquam eget porta augue. Etiam tincidunt orci et sem lobortis fermentum. Mauris aliquam, dolor quis congue interdum, neque est lacinia nisi, pellentesque ultricies mauris quam eu neque. Pellentesque ultrices malesuada fermentum. Pellentesque porttitor posuere enim, sed congue mauris tristique eget.
  • .list-item-image-right
    CSS Class: list-item-image-right

    Sitefinity List Demo - Tabs

    • slide-02

      Panel 1. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut.

      Nam porttitor quis lacus at scelerisque. Vivamus tristique erat tortor, at fermentum neque lacinia eget. Vestibulum cursus est vitae feugiat facilisis. Aliquam eget porta augue. Etiam tincidunt orci et sem lobortis fermentum. Mauris aliquam, dolor quis congue interdum, neque est lacinia nisi, pellentesque ultricies mauris quam eu neque. Pellentesque ultrices malesuada fermentum. Pellentesque porttitor posuere enim, sed congue mauris tristique eget.
    • slide-03

      Panel 2. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut.

      Nam porttitor quis lacus at scelerisque. Vivamus tristique erat tortor, at fermentum neque lacinia eget. Vestibulum cursus est vitae feugiat facilisis. Aliquam eget porta augue. Etiam tincidunt orci et sem lobortis fermentum. Mauris aliquam, dolor quis congue interdum, neque est lacinia nisi, pellentesque ultricies mauris quam eu neque. Pellentesque ultrices malesuada fermentum. Pellentesque porttitor posuere enim, sed congue mauris tristique eget.
    • slide-05

      Panel 3. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus.

      Nam porttitor quis lacus at scelerisque. Vivamus tristique erat tortor, at fermentum neque lacinia eget. Vestibulum cursus est vitae feugiat facilisis. Aliquam eget porta augue. Etiam tincidunt orci et sem lobortis fermentum. Mauris aliquam, dolor quis congue interdum, neque est lacinia nisi, pellentesque ultricies mauris quam eu neque. Pellentesque ultrices malesuada fermentum. Pellentesque porttitor posuere enim, sed congue mauris tristique eget.
  • .list-item-image-left
    CSS Class: list-item-image-left

    Sitefinity List Demo - Tabs

    • slide-02

      Panel 1. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut.

      Nam porttitor quis lacus at scelerisque. Vivamus tristique erat tortor, at fermentum neque lacinia eget. Vestibulum cursus est vitae feugiat facilisis. Aliquam eget porta augue. Etiam tincidunt orci et sem lobortis fermentum. Mauris aliquam, dolor quis congue interdum, neque est lacinia nisi, pellentesque ultricies mauris quam eu neque. Pellentesque ultrices malesuada fermentum. Pellentesque porttitor posuere enim, sed congue mauris tristique eget.
    • slide-03

      Panel 2. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut.

      Nam porttitor quis lacus at scelerisque. Vivamus tristique erat tortor, at fermentum neque lacinia eget. Vestibulum cursus est vitae feugiat facilisis. Aliquam eget porta augue. Etiam tincidunt orci et sem lobortis fermentum. Mauris aliquam, dolor quis congue interdum, neque est lacinia nisi, pellentesque ultricies mauris quam eu neque. Pellentesque ultrices malesuada fermentum. Pellentesque porttitor posuere enim, sed congue mauris tristique eget.
    • slide-05

      Panel 3. Etiam accumsan turpis eget neque dignissim aliquet. Nullam ullamcorper, leo et commodo eleifend, sem felis mollis libero, ut egestas velit enim non neque. Maecenas mollis ligula ligula, sit amet placerat leo lobortis ut. Sed sed ex eget sem ultricies congue. Nunc laoreet condimentum aliquam. Donec nunc lacus, facilisis vel mauris quis, ultrices gravida risus. Quisque gravida augue erat, tincidunt porta sem convallis nec. Nunc vel luctus risus.

      Nam porttitor quis lacus at scelerisque. Vivamus tristique erat tortor, at fermentum neque lacinia eget. Vestibulum cursus est vitae feugiat facilisis. Aliquam eget porta augue. Etiam tincidunt orci et sem lobortis fermentum. Mauris aliquam, dolor quis congue interdum, neque est lacinia nisi, pellentesque ultricies mauris quam eu neque. Pellentesque ultrices malesuada fermentum. Pellentesque porttitor posuere enim, sed congue mauris tristique eget.
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
Top