DA Site Components and Style

In this page:

Overview
Code Snippets
Components
Additional Resources

Overview

A reference of the components, conventions, and styles used on this site.

Code snippets

Site Components and Styles

Adds a red dashed box to links on hover

/* -------- dashed hover -------- */
a:hover {
  border: 2px dashed #da1f12;
  border-radius: 3px;
  outline: none;
}

Email link with subject and body

The subject or body sections can be customized and removed, the %20 creates a space between words and opens email is the accessible way to let the user know that selecting the link will open their email application.

<a 
href="mailto:email@example.com?subject=Email%20Subject&amp;body=Email%20body%20text%20">Link
 text (opens email)</strong></a>

In this page

In this page code:

<div class="well">
  <blockquote>
   <strong><span class="red">In this page:</span></strong>
  </blockquote>
  <ul>
   <li><a href="#overview">Overview</a></li>
   <li><a href="#da-plays">Plays</a></li>
  <li><a href="#additional-resources">Additional Resources</a></li>
 </ul>
</div>

Keyboard shortcut

Using the <kbd> tag:

<p>Please press <kbd>Ctrl</kbd> + <kbd>+</kbd> to zoom larger

Renders as:

Please press Ctrl + + to zoom larger

Note: this is currently styled slightly differently in each browser

Opens new tab

Adds the text "(opens new tab)"

/* --- (opens new tab) after link text if target=_blank -- */
a[target="_blank"]:after {
    content: "  (opens new tab)";
}

Note: It's best not to use this and default to expected browser behavior. If target is set to _blank then this is the correct method. This method is preferred to an external link icon which can be an issue for screen readers and various cognitive impairments.

Sticky anchor

<div class="sticky-anchor-100" id="overview">
<h2><span class="red">Overview</span></h2>
</div>

Components

Site Components and Styles

Blog cards

Blog Card Styling

List item template: Blog title only
Classes: summary-sm-small cats-show icon-show date-hide list-col-sm-4 list-masonry item-title-small blog-post-item-card title-tag-p
Notes: adjust the columns as necessary, though one or two columns are best for blog posts

Background:

Component: Container
Classes: padding-top-20 teal-light-bg

List cards

List Card Styling

List item template: Link list card icon
Classes: list-item-small list-col-sm-4 list-item-title-medium text-center
Notes: adjust the columns as necessary

Background:

Component: Container
Classes: padding-top-20 teal-light-bg

UTMB Content summary text size

UTMB Content summary text size CSS tags

summary-large summary-sm-large summary-md-large summary-lg-large summary-medium (default) summary-sm-medium summary-md-medium summary-lg-medium summary-small summary-sm-small summary-md-small summary-lg-small summary-hide

UTMB List title heading tags

title-h1 
title-sm-h1
title-md-h1
title-lg-h1
title-h2
title-sm-h2 
title-md-h2
title-lg-h2
title-h3

(default)


title-sm-h3 
title-md-h3 
title-lg-h3
title-h4
title-sm-h4
title-md-h4
title-lg-h4 
title-h5
title-sm-h5
title-md-h5 
title-lg-h5
title-h6 
title-sm-h6
title-md-h6 
title-lg-h6
title-hide

Additional Resources

UTMB Page links

UTMB Web and Sitefinity Cheatsheet

Font Awesome Icon Cheatsheet

UI-Kit Icon Cheatsheet

Site Components and Styles

External content note

NOTE: Some links on this site open external content created by third parties. Such links to not imply endorsement of content, products, services, or viewpoints nor do we assume any responsibility for such content. Efforts are made to link only to current, well-known, and prominent resources. Whenever possible the company name is in parentheses.