DA Site Components and Style

Adds a red dashed box to links on hover

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.

In this page code:

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

Adds the text "(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.

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 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 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