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.
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.
This paragraph is inside a default, unmodified panel.
There are two unchanged default from Foundation:
These settings override the Foundation defaults, to ensure .panel fits the UTHSCSA look and feel:
Panel has no default settings for descendants, but many child elements are affected by colorization options.
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.
.panel.colorized
Blockquote. Donec odio urna tempus Citation Here
.panel.colorized.darken
Blockquote. Nulla est fusce suscipit Citation Here
.panel.colorized.white
Blockquote. In in enim a Citation Here
.panel.colorized.alpha
Blockquote. Ut tempus purus at Citation Here
Combine .colorized with .colorized-theme to automatically colorize a panel with the page's theme color.
.panel.colorized.colorized-theme
Blockquote. Suspendisse potenti etiam posuere Citation Here
.panel.colorized.colorized-theme-darken
Blockquote. Etiam posuere lacus quis Citation Here
.panel.colorized.colorized-theme-accent
Blockquote. Curabitur sagittis hendrerit ante Citation Here
You can also force a particulare theme color:
.panel.colorized.colorized-patientcare
Blockquote. Cras pede libero dapibus Citation Here
.panel.colorized.colorized-academics
Blockquote. Morbi a metus proin Citation Here
.panel.colorized.colorized-research
Blockquote. Phasellus enim erat vestibulum Citation Here
.panel.colorized.colorized-patientcare-darken
Blockquote. Pellentesque sapien mauris suscipit Citation Here
.panel.colorized.colorized-academics-darken
Blockquote. Vestibulum fermentum tortor id Citation Here
.panel.colorized.colorized-research-darken
Blockquote. Etiam posuere quam ac Citation Here
Add .hex-pattern to a panel to apply a subtle hexagon texture. Shown on darker panels for visibility:
.panel.hex-pattern
Blockquote. Etiam sapien elit consequat Citation Here
.panel.hex-pattern
Blockquote. Maecenas ipsum velit consectetuer Citation Here
.panel.hex-pattern
Blockquote. Proin mattis lacinia justo Citation Here
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.hex-pattern-large
Blockquote. In vulputate urna eu Citation Here
.panel.hex-pattern-large.hex-pattern-right
Blockquote. Donec odio urna tempus Citation Here
Add the .outline class to any panel to use a white, outlined box instead of the default:
.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.
Add the class .popout to allow elements with the class .popout-item to shift 100px out of the panel's top:
.panel.popout
The image above has the class .popout-item, so it pops out of the panel.
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.
Nulla est. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.
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.
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.
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.
Phasellus faucibus molestie nisl. In vulputate urna eu arcu. Aenean fermentum risus id tortor.
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.