Basic Page Headers

A basic page header is a wrapper for any Hx Heading. The heading and any accompanying text will be rendered inside a theme-colorized box.

---

Bleeding Page Headers

A bleeding page header is a page header that bleeds to the edges of the screen. It is essentially a combination of Page Header and Bleed. Typically, bleeding page headers are combined with the grid to create a variety of flexible header styles for landing pages.

Documentation for Bleeding Page Headers

Pattern Library Home

---

Panels

Panels are a Foundation component. The default Foundation panel is a simple padded, neutral-color box. The UTHSCSA Library extends panels to serve a variety of layout and content needs.

Check the Foundation 5 Documentation for Panels for more information about the base element.

Documentation for UTHSCSA's Panels

---

Panel Sidecar Boxes

A panel sidecar is a two-column layout piece with a panel on the right side, unified by a horizontal rule across the top:

---

Linear Box

Linear Box adds a thin rule around things inside it. Add .block to .linear-box to make text appear styled inside the box. Set in a dark panel for visibility:

---

Circles

Circles are designed to contain single numbers, letters, or icons.

• C
• I
• R
• C
• L
• E
• S

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Colorize circles...

By theme, theme-darken, and theme-accent:

Force a particular theme color:

---

Single Borders

The .single-border classes allow you to stroke one side of any block-level element with a thick border on the specified side. For example, add .single-border-left to .single-border to stroke the left side.

Single Borders can be colorized by theme, theme-darken, and theme-accent by combining .colorized-border with a colorize class:

Or you can force a particular theme color:

An alpha option exists, but to use this option you must wrap the element inside the border classes. This prevents the border from appearing "transparent" on the inside of the element.

---

Bleeds

Bleeds are simple building-block divs that extend infinitely horizontally. Bleeds are typically wrappers for content, and are used to separate or standout certain content from its surroundings.

Documentation for Bleeds

---

Collapsible Secondary Navigation

Add the class .collapsible to a nav element containing any unordered list of links. Collapsible nav expects:

• Current page links to have the class .current
• Two-level deep nesting

---

Shade Alternate Rows

Wrap a set of rows in .shade-alternate-rows to apply the Panel Color #f7f4f0

---

Tabs

Tabs allow you to present a large amount of related information in a shorter, tabbed-style navigable interface. Tabs expects:

• A container div .tabs
• An unordered list of linked tab names called .tab-nav
• A set of div tabs each called .tab, which can contain any content.

Note that extensions for tabs are all applied to the navigation list, ul.tab-nav. The tab content divs themselves are left unstyled to allow flexibility. Combine .tab with bleeds, panels, columns, etc to create rich tab interfaces, or leave .tab unstyled for simpler tabs.

---

Results Filters

Results Filters extend panels and apply settings to form elements specific to filtering. Basics for setting up a Results Filters box:

• Add .filters to the filtering form element
• Add .filter-heading to a heading or text element inside a legend
• Create a button outside of the filters form wrapped in .filtersToggle to collapse/expand the filters in smaller views.

---

Alphabetized Data

Two classes are provided for organizing alphabetized data on a page:

• A modifier for unordered lists, .alphabet, which is used to create a smooth-scrolling anchor list of letters to navigate the alphabetized data.
• a wrapper for groups of alphabetized data, .alpha-group, which is used to group data by letter.

Example of ul.alphabet. Add .smoothScroll to links to gently scroll the browser to the cooresponding letter in .alpha-group:

Example of Alpha Groups. Add .alpha-headline to make the letter headline stand out, and wrap each piece of data in the letter group in .alpha-listing.

---

Pagination

The pagination styles allow the user to navigate page by page, or jump to a specific page. To create pagination:

• Create an unordered list, .prevnext, with children .prev and .next for simple paging
• Create an unordered list, .numbers, to list the first page, contextual pages, and last page.

---

Numeric Fact Sets

Numeric Facts provides styling for quick numeric facts about a subject. The text "numeric detail" should be limited in length for quick scanning.

These examples are set inside panels for visibility, but .panel is not a required component for numeric facts.

Colorization Options for Numeric Facts

---

Comparison Charts

A comparison chart is a series of rows with descriptions and icons. The icons are used to create an easily-scannable comparison between items, like a rating system.

Every other row inside a comparision chart is shaded. Headlines inside the description area are automatically styled with spacing and a line below.

To highlight icons, a colorize-icon class definition must be added to the icon in icons.scss.

---

Steps Bar

The steps bar is a navigation item used to indicate the user's location in a set of steps, and to allow the user to navigate between steps. The steps bar is colorized by theme and does not currently have any other colorization options. It could be extended to match the colorization options of panels, bleeds, and other modules as needed.

The active step is indicated by the class .active. Steps bar expects:

• A block-grid list matching the number of items in the steps bar. For example, the three-step bar below is wrapped in block-grid-3 classes.
• List items containing circles and an empty div, .bar
• The active step assigned to the list item by the class .active

• 1
• 2
• 3

Example with more steps, intermediate item as active:

• 1
• 2
• 3
• 4
• 5
• 6
• 7

---

Carousels

Carousels are built using the Basilio Responsive Carousel Plugin. See the documentation for the plugin to learn more about how to use and extend it.

The UTHSCSA library provides two options for carousel navigation: simple previous/next arrows (default behavior), and large previous/next icon arrow which overlay the content.

---

Video Launch Thumbnails

Wrap a fancybox link in .video-thumbnail to add a centered video launch icon and make the entire thumbnail clickable.

Video Launch Thumbnails expect:

• A fancybox link to the video URL
• An image tag containing the thumbnail
• A div .video-button, containing a wrapper .inner, and a colorized .circle element with video icon.

---

Dateboxes

Dateboxes are used to highlight calendar dates. Dateboxes are colorized by theme and do not currently have any other colorization options. They could be extended to match the colorization options of panels, bleeds, and other modules as needed.

Dateboxes expect:

• A containing div, .datebox
• If month/day format is desired, a .month div containing the abbreviated version of the month, ie "Feb"
• A div .date, which can contain the numeric date, or the text "All Day" when combined with .datebox.today

---

Foundation: Flex Video

Flex Video is a Foundation component used to control the display of videos.

See the Foundation 5 Documentation for Flex Video for more information about it.

---

Foundation: Visibility

Visibility is a Foundation utility used to control the display of elements based on certain conditions, like screen size.

See the Foundation 5 Documentation for Visibility for more information about it.