Part of UT Health San Antonio

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.

Topics for Panels:

When to Use a Panel

Panels can be used basically everywhere, but their primary purpose is to highlight important content. They are the bread and butter of the building block tools, and can be used to add color or interest to a page in a variety of ways.

Default Settings for Panels

Default Panel

This paragraph is inside a default, unmodified panel.

There are two unchanged default from Foundation:

  • Panel has the same default bottom margin as other block level elements (20px).
  • Panel has padding on all sides, which matches the default bottom margin (20px).

These settings override the Foundation defaults, to ensure .panel fits the UTHSCSA look and feel:

  • Panel has a special background color, $color-panel (#f7f4f0)
  • The default border is turned off, as few elements in the library have borders.

Settings for Descendants

Panel has no default settings for descendants, but many child elements are affected by colorization options.

Theming and Colorization

Adding the .colorized class to a panel will switch its background to UT Orange by default, and reset its children for readability on dark backgrounds.

The .white and .alpha options are nested inside a darker panel for visibility.

Colorized Panel

.panel.colorized


Basic Text Link

Button

Blockquote. Donec odio urna tempus Citation Here
Colorized Panel, Darkened

.panel.colorized.darken


Basic Text Link

Button

Blockquote. Nulla est fusce suscipit Citation Here
Colorized Panel, White

.panel.colorized.white


Basic Text Link

Button

Blockquote. In in enim a Citation Here
Colorized Panel, Transparent

.panel.colorized.alpha


Basic Text Link

Button

Blockquote. Ut tempus purus at Citation Here

Automatic Theme Colorization

Combine .colorized with .colorized-theme to automatically colorize a panel with the page's theme color.

Theme Colorized Panel

.panel.colorized.colorized-theme


Basic Text Link

Button

Blockquote. Suspendisse potenti etiam posuere Citation Here
Theme Colorized Panel, Darkened

.panel.colorized.colorized-theme-darken


Basic Text Link

Button

Blockquote. Etiam posuere lacus quis Citation Here
Theme Accent Colorized Panel

.panel.colorized.colorized-theme-accent


Basic Text Link

Button

Blockquote. Curabitur sagittis hendrerit ante Citation Here

Forced Theme Colorization

You can also force a particulare theme color:

Patient Care Colorized Panel

.panel.colorized.colorized-patientcare


Basic Text Link

Button

Blockquote. Cras pede libero dapibus Citation Here
Academics Colorized Panel

.panel.colorized.colorized-academics


Basic Text Link

Button

Blockquote. Morbi a metus proin Citation Here
Research Colorized Panel

.panel.colorized.colorized-research


Basic Text Link

Button

Blockquote. Phasellus enim erat vestibulum Citation Here
Patient Care Colorized Panel, Darkened

.panel.colorized.colorized-patientcare-darken


Basic Text Link

Button

Blockquote. Pellentesque sapien mauris suscipit Citation Here
Academics Colorized Panel, Darkened

.panel.colorized.colorized-academics-darken


Basic Text Link

Button

Blockquote. Vestibulum fermentum tortor id Citation Here
Research Colorized Panel, Darkened

.panel.colorized.colorized-research-darken


Basic Text Link

Button

Blockquote. Etiam posuere quam ac Citation Here

Hex Pattern

Add .hex-pattern to a panel to apply a subtle hexagon texture. Shown on darker panels for visibility:

Panel with Hex Pattern

.panel.hex-pattern


Basic Text Link

Button

Blockquote. Etiam sapien elit consequat Citation Here
Panel with Hex Pattern

.panel.hex-pattern


Basic Text Link

Button

Blockquote. Maecenas ipsum velit consectetuer Citation Here
Panel with Hex Pattern

.panel.hex-pattern


Basic Text Link

Button

Blockquote. Proin mattis lacinia justo Citation Here

Large Hex Pattern

Add .hex-pattern-large to a panel to apply a larger formatted hexagon texture. Add .hex-pattern-right to start the image from the top right corner instead of the left:

Panel with Hex Pattern

.panel.hex-pattern-large


Basic Text Link

Button

Blockquote. In vulputate urna eu Citation Here
Panel with Hex Pattern, Right Side

.panel.hex-pattern-large.hex-pattern-right


Basic Text Link

Button

Blockquote. Donec odio urna tempus Citation Here

Extension Options for Panel

Outline Panel

Add the .outline class to any panel to use a white, outlined box instead of the default:

Outline Panel

.panel.outline

Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Praesent in mauris eu tortor porttitor accumsan. Nunc dapibus tortor vel mi dapibus sollicitudin.

Panel Popouts

Add the class .popout to allow elements with the class .popout-item to shift 100px out of the panel's top:

Popout Panel

.panel.popout

The image above has the class .popout-item, so it pops out of the panel.

Column Jumping Panels

Add .jump-columns-right or .jump-columns-left to jump it slightly out to the left or right of its containing column. Column jumping panels must be the only item in their column, or the first or last child of that column. Images added for visibility:



This panel jumps the column to the left of it.



This panel jumps the column to the right of it.

Common Patterns for Panels

Outline Panel Callout

Short Headline

Link or call to action

Panel with Bleeding Item Inside

Duis risus in nisl sed

Nulla est. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.

Panel with alpha colorized panel inset inside it

Nunc dapibus tortor vel mi dapibus sollicitudin. Etiam bibendum elit eget erat.

Cras elementum. Maecenas aliquet accumsan leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo.

Button

Fusce dui leo

Nam sed tellus id magna elementum tincidunt. Aenean vel massa quis mauris vehicula lacinia. Pellentesque pretium lectus id turpis. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Integer pellentesque quam vel velit.

Optional Link

Panel as Figcaption

Caption for photo. Vestibulum facilisis auctor urna. Morbi gravida libero nec velit. Vestibulum fermentum tortor id mi. Nulla non arcu lacinia neque faucibus fringilla.

Topic Panel with Linear Box headline and icon

Panel Headline

Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu, urna. Aliquam id dolor. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Aliquam ante.

Outline Panel + Single Border Top

Headline Here

Phasellus faucibus molestie nisl. In vulputate urna eu arcu. Aenean fermentum risus id tortor.

Jumping Panel + Single Border

In rutrum. Etiam egestas wisi a erat. Pellentesque pretium lectus id turpis.

Aliquam ornare wisi eu metus. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Integer vulputate sem a nibh rutrum consequat.