Panel

Panels are used as multi-purpose containers for a variety of content.


React Component

While this page depicts Panels within Cards, this is merely a consequence of our documentation structure and not a pattern that should be implemented elsewhere.

Basic Panel

Panel Header Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus mauris ut turpis gravida bibendum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus mauris ut turpis gravida bibendum. Donec feugiat accumsan velit et semper. Ut elementum id leo ac fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus mauris ut turpis gravida bibendum. Donec feugiat accumsan velit et semper. Ut elementum id leo ac fringilla.

Panel Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus mauris ut turpis gravida bibendum. Donec feugiat accumsan velit et semper. Ut elementum id leo ac fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus mauris ut turpis gravida bibendum. Donec feugiat accumsan velit et semper. Ut elementum id leo ac fringilla.

Panels are rich containers that allow for grouping and organizing content details. They have the following overall setup available:

  • Header SagePanelHeader (optional) This area usually contains at least a title (sage-panel__title) and often an icon or menu positioned in the right corner. An optional subtext element (sage-panel__subtext) is useful for documenting the panel objective. It employs the Sage Row layout base with 24px gutters.

  • Body While there is no specific container for the body itself, there are a variety of panel components that can be used to create most panel configurations. The simplest of these is Panel Block SagePanelBlock (shown above), allowing open text or elements without any preset spacing between them. Others, such as Panel Stack SagePanelStack are more opinionated, enforcing specific spacing or layout features. Each of the Panel components is explained and demonstrated in more detail below.

  • Footer SagePanelFooter (optional) This area often contains one or more buttons that can be sent to the right edge of the panel with the align_spread: true component attribute. It employs the Sage Row layout base with 24px gutters.

Panel Block .sage-panel__block

A block is a completely unopinionated container meant to provide the most flexible way to group elements within a panel. This component is purely a wrapper and does not apply any layout or spacing by default so it is great for blocks of text or small groups of content within some of the other panel components. Set type_block to true to enforce open text spacing rules as established by the sage-type class.

Panel Stack .sage-panel__stack

A stack is a single column of elements sitting atop each other with the standard 8px gap between each item in the stack. A common use is for stacking cards, but this is also help for presentation of several distinct lines of text content beyond open type formatting.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi rhoncus mauris ut turpis gravida bibendum.
Donec feugiat accumsan velit et semper.
Ut elementum id leo ac fringilla.

Panel List .sage-panel__list

A list is a similar to a stack but has no space between items, and each item has a border that extends into the panel's outer gutters. Lists can also have row-like layouts with elements setup inline.

Example:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Morbi rhoncus mauris ut turpis gravida bibendum.
  • Donec feugiat accumsan velit et semper.
  • Ut elementum id leo ac fringilla.

Panel Row .sage-panel__row

A panel row is a single or isolated inline arrangement of elements. It can either be a custom component or employ one of the standard Grid Template Patterns.

Example:

Lorem ipsum dolor sit amet

consectetur adipiscing elit

Panel Tiles .sage-panel__tiles

Tiles are groups of elements that typically also each contain additional content but are laid out in a neat tiling pattern. Items can use the generic .sage-panel__tile, or be another Sage Component such as a Card. Use one of the tiling pattern modifiers to determine how many tiles appear in a row of the grid: 2-up, 3-up, and 4-up patterns.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi rhoncus mauris ut turpis gravida bibendum.
Donec feugiat accumsan velit et semper.
Ut elementum id leo ac fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Panel Subheader .sage-panel__subheader

The Panel Subheader provides specific styles for a subheading within a panel. It is very similar in configuration to the panel header but shows with smaller type. Format the text content itself with .sage-panel__subtitle, which can also be used independently. An optional subtext attribute (subtext:) is useful for documenting the panel objective.

Example:

Panel header here

Panel subheader here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus mauris ut turpis gravida bibendum. Donec feugiat accumsan velit et semper. Ut elementum id leo ac fringilla.

Panel Divider .sage-panel__divider

The Divider is a thin rule that helps to provide additional visual separation between groups within the panel.

Example:

Dividers can also be set to extend to the panel edges with the --full-bleed modifier. They may also contain label text.

Divider:


Divider (w/ label):


Label text

Divider (full bleed):


Panel Figure .sage-panel__figure

A Panel Figure contains an image that occupies a substantive space in the panel, typically filling edge to edge.See the Panel Figure component for more details.

Panel Grid Utility .sage-panel-grid

The .sage-panel-grid utility class can be added onto containers in order to enforce the Panel's internal grid settings.This is helpful in cases where a container of some sort is needed around contents but those contents should still recieve the standard Panel-scoped gaps.

Sage Component

SagePanel
<%
sample_copy = md("
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi rhoncus mauris ut turpis gravida bibendum.
Donec feugiat accumsan velit et semper.
Ut elementum id leo ac fringilla.
")
%>

<%= sage_component SageAlert, {
  color: "warning",
  desc: "While this page depicts Panels within Cards, this is merely a consequence of our documentation structure and not a pattern that should be implemented elsewhere.",
  icon_name: "sage-icon-warning",
} %>

<%= sage_component SagePanelHeader, { title: "Basic Panel" } %>

<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelHeader, {
    title: "Panel Header Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Morbi rhoncus mauris ut turpis gravida bibendum",
    title_tag: "h3",
  } do %>
    <%= sage_component SageButton, {
      value: "More info",
      subtle: true,
      style: "secondary",
      icon: {
        name: "info-circle",
        style: "left"
      }
    } %>
    <%= content_for :sage_panel_header_subtext do %>
      <%= sample_copy.html_safe %>
    <% end %>
  <% end %>
  <%= sage_component SagePanelBlock, { type_block: true } do %>
    <%= sample_copy.html_safe %>
  <% end %>
  <%= sage_component SagePanelFooter, {} do %>
    <%= sage_component SageButton, { value: "Cancel", style: "secondary" } %>
    <%= sage_component SageButton, { value: "Save", style: "primary" } %>
  <% end %>
<% end %>

<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelHeader, {
    title: "Panel Header",
    tag: "h3",
  } do %>
    <%= sage_component SageSwitch, {
      hide_text: true,
      id: "sage-switch-1",
      label_text: "Switch (checkbox)",
      name: "sage-switch-1",
      type: "checkbox",
      value: "switch-1-value",
    } %>
    <%= content_for :sage_panel_header_subtext do %>
      <%= sample_copy.html_safe %>
    <% end %>
  <% end %>
  <%= sage_component SagePanelBlock, { type_block: true } do %>
    <%= sample_copy.html_safe %>
  <% end %>
<% end %>

<%= md("
Panels are rich containers that allow for grouping and organizing content details. They have the following overall setup available:

- **Header**
  `SagePanelHeader`
  (optional) This area usually contains at least a title (`sage-panel__title`) and often an icon or menu positioned in the right corner. An optional subtext element (`sage-panel__subtext`) is useful for documenting the panel objective. It employs the Sage Row layout base with `24px` gutters.

- **Body**
  While there is no specific container for the body itself, there are a variety of panel components that can be used to create most panel configurations. The simplest of these is **Panel Block** `SagePanelBlock` (shown above), allowing open text or elements without any preset spacing between them. Others, such as **Panel Stack** `SagePanelStack` are more opinionated, enforcing specific spacing or layout features. Each of the Panel components is explained and demonstrated in more detail below.

- **Footer**
  `SagePanelFooter` (optional) This area often contains one or more buttons that can be sent to the right edge of the panel with the `align_spread: true` component attribute. It employs the Sage Row layout base with `24px` gutters.", use_sage_type: true) %>

<%= sage_component SagePanelHeader, { title: "Panel Block <code>.sage-panel__block</code>".html_safe } %>
<%= md("A block is a completely unopinionated container meant to provide the most flexible way to group elements within a panel. This component is purely a wrapper and does not apply any layout or spacing by default so it is great for blocks of text or small groups of content within some of the other panel components. Set `type_block` to `true` to enforce open text spacing rules as established by the `sage-type` class.", use_sage_type: true) %>

<%= sage_component SagePanelHeader, { title: "Panel Stack <code>.sage-panel__stack</code>".html_safe } %>
<%= md("A stack is a single column of elements sitting atop each other with the standard 8px gap between each item in the stack. A common use is for stacking cards, but this is also help for presentation of several distinct lines of text content beyond open type formatting.", use_sage_type: true) %>

<%= sage_component SagePanelSubheader, { title: "Example:" } %>

<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelStack, {} do %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardRow, { grid_template: "et" } do %>
        <i class="sage-icon-video-on"></i>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
      <% end %>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardRow, { grid_template: "et" } do %>
        <i class="sage-icon-video-on"></i>
        <span>Morbi rhoncus mauris ut turpis gravida bibendum.</span>
      <% end %>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardRow, { grid_template: "et" } do %>
        <i class="sage-icon-video-on"></i>
        <span>Donec feugiat accumsan velit et semper.</span>
      <% end %>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardRow, { grid_template: "et" } do %>
        <i class="sage-icon-video-on"></i>
        <span>Ut elementum id leo ac fringilla.</span>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<%= sage_component SagePanelHeader, { title: "Panel List <code>.sage-panel__list</code>".html_safe } %>
<%= md("A list is a similar to a stack but has no space between items, and each item has a border that extends into the panel's outer gutters. Lists can also have row-like layouts with elements setup inline.", use_sage_type: true) %>

<%= sage_component SagePanelSubheader, { title: "Example:" } %>
<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelList, {} do %>
    <%= sage_component SagePanelListItem, { grid_template: "et" } do %>
      <i class="sage-icon-video-on"></i>
      <span class="t-sage-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    <% end %>
    <%= sage_component SagePanelListItem, { grid_template: "et" } do %>
      <i class="sage-icon-video-on"></i>
      <span class="t-sage-body">Morbi rhoncus mauris ut turpis gravida bibendum.</span>
    <% end %>
    <%= sage_component SagePanelListItem, { grid_template: "et" } do %>
      <i class="sage-icon-video-on"></i>
      <span class="t-sage-body">Donec feugiat accumsan velit et semper.</span>
    <% end %>
    <%= sage_component SagePanelListItem, { grid_template: "et" } do %>
      <i class="sage-icon-video-on"></i>
      <span class="t-sage-body">Ut elementum id leo ac fringilla.</span>
    <% end %>
  <% end %>
<% end %>

<%= sage_component SagePanelHeader, { title: "Panel Row <code>.sage-panel__row</code>".html_safe } %>
<%= md("A panel row is a single or isolated inline arrangement of elements. It can either be a custom component or employ one of the standard Grid Template Patterns.", use_sage_type: true) %>

<%= sage_component SagePanelSubheader, { title: "Example:" } %>
<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelRow, { grid_template: "ete" } do %>
    <i class="sage-icon-check-circle-xl t-sage--color-sage"></i>
    <%= sage_component SagePanelBlock, {} do %>
      <p class="t-sage-body-semi">Lorem ipsum dolor sit amet</p>
      <p class="t-sage-body-small t-sage--color-grey">consectetur adipiscing elit</p>
    <% end %>
    <%= sage_component SageButton, {
      value: "Options",
      style: "secondary",
      subtle: true,
      icon: {
        name: "dot-menu-horizontal",
        style: "only"
      }
    } %>
  <% end %>
<% end %>

<%= sage_component SagePanelHeader, { title: "Panel Tiles <code>.sage-panel__tiles</code>".html_safe } %>
<%= md("Tiles are groups of elements that typically also each contain additional content but are laid out in a neat tiling pattern. Items can use the generic `.sage-panel__tile`, or be another Sage Component such as a Card. Use one of the tiling pattern modifiers to determine how many tiles appear in a row of the grid: 2-up, 3-up, and 4-up patterns.", use_sage_type: true) %>

<%= sage_component SagePanelSubheader, { title: "Example:" } %>
<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelTiles, { tiles_in_row: 3 } do %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardFigure, {} do %>
        <%= image_tag("card-placeholder-sm.png", alt: "") %>
      <% end %>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardFigure, {} do %>
        <%= image_tag("card-placeholder-sm.png", alt: "") %>
      <% end %>
      <span>Morbi rhoncus mauris ut turpis gravida bibendum.</span>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardFigure, {} do %>
        <%= image_tag("card-placeholder-sm.png", alt: "") %>
      <% end %>
      <span>Donec feugiat accumsan velit et semper.</span>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardFigure, {} do %>
        <%= image_tag("card-placeholder-sm.png", alt: "") %>
      <% end %>
      <span>Ut elementum id leo ac fringilla.</span>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardFigure, {} do %>
        <%= image_tag("card-placeholder-sm.png", alt: "") %>
      <% end %>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    <% end %>
  <% end %>
<% end %>

<%= sage_component SagePanelHeader, { title: "Panel Subheader <code>.sage-panel__subheader</code>".html_safe } %>
<%= md("The Panel Subheader provides specific styles for a subheading within a panel. It is very similar in configuration to the panel header but shows with smaller type. Format the text content itself with `.sage-panel__subtitle`, which can also be used independently. An optional subtext attribute (`subtext: ""`) is useful for documenting the panel objective.", use_sage_type: true) %>

<%= sage_component SagePanelSubheader, { title: "Example:" } %>
<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelHeader, { title: "Panel header here" } %>
  <%= sage_component SagePanelSubheader, { title: "Panel subheader here" } %>
  <%= sage_component SagePanelBlock, { type_block: true } do %>
    <%= sample_copy.html_safe %>
  <% end %>
<% end %>

<%= sage_component SagePanelHeader, { title: "Panel Divider <code>.sage-panel__divider</code>".html_safe } %>
<%= md("The Divider is a thin rule that helps to provide additional visual separation between groups within the panel.", use_sage_type: true) %>

<%= sage_component SagePanelSubheader, { title: "Example:" } %>
<%= md("Dividers can also be set to extend to the panel edges with the `--full-bleed` modifier. They may also contain label text.", use_sage_type: true) %>
<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelHeader, { title: "Divider:" } %>
  <%= sage_component SagePanelDivider, {} %>
  <%= sage_component SagePanelHeader, { title: "Divider (w/ label):" } %>
  <%= sage_component SagePanelDivider, { label: "Label text" } %>
  <%= sage_component SagePanelHeader, { title: "Divider (full bleed):" } %>
  <%= sage_component SagePanelDivider, { bleed: true } %>
<% end %>

<%= sage_component SagePanelHeader, { title: "Panel Figure <code>.sage-panel__figure</code>".html_safe } %>
<%= md("A Panel Figure contains an image that occupies a substantive space in the panel, typically filling edge to edge.See the #{link_to("Panel Figure component", pages_component_path("panel_figure"), class: "sage-link")} for more details.", use_sage_type: true) %>

<%= sage_component SagePanelHeader, { title: "Panel Grid Utility <code>.sage-panel-grid</code>".html_safe } %>
<%= md("The `.sage-panel-grid` utility class can be added onto containers in order to enforce the Panel's internal grid settings.This is helpful in cases where a container of some sort is needed around contents but those contents should still recieve the standard Panel-scoped gaps.", use_sage_type: true) %>
Property Description Type Default

clear_bottom_padding

Erases padding on bottom of the Panel for tighter alignment of child items.

Boolean

false

clear_top_padding

Erases padding on top of the Panel for tighter alignment of child items.

Boolean

false

Panel Header

title

Sets the title for the Panel.

String

title_tag

Optional. Sets a title tag for the title. Default is h2.

String

subtext

Optional. Sets a subtext following the title.

String

Panel List

block_spacing

Adjusts the default spacing settings on top and bottom of items inside the list.

Optionally: md

--

hide_first_border

Removes top border from first list item within a PanelList

Boolean

false

Panel ListItem

grid_template

Sets the grid template to be used in the row of the component. See the Grid Templates to decide which pattern.

String

nil

gap

Adjusts the size of the gap between items in a list item.

Optionally: [:xs | :sm | :md | :lg]

nil

Panel Row

grid_template

Sets the grid template to be used in the row of the component. See the Grid Templates to decide which pattern.

String

nil

gap

Adjusts the size of the gap between items in a panel row.

Optionally: [:xs | :sm | :md | :lg]

nil

Panel Stack

spacing

Creates unique spacing using the sage-spacing(card) size.

Optionally: form

nil

Panel Footer

align_spread

Aligns the footer content to the right of the footer. Typically this is used with buttons.

Boolean

nil