Panel
Panels have to be a representation of a group of items in semantic relation and could be totally independent.
A panel should be identifiable by a name, a title or a illustration and can contain a short description and a little amount of actions (1 to 3 maximum), like « See more », « Sign up », « Remove » or similar.
Panels are grouped in columns or rows unless it covers the entire page (e.i. main content page).
Basic
Header
Header with watermark
header
999
Watermarks are used to show the number of items in your panel.
Strong header
header
999
Body with icon as background
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae numquam velit nam quis accusantium consequatur dolore odio excepturi facilis ipsam. Tempore non velit possimus, iure porro vitae ex doloremque cumque quos, nesciunt molestias beatae, quam, ea maxime. Neque repellat adipisci, veniam, laboriosam culpa ullam, provident deserunt necessitatibus unde in autem, maxime quasi.
[…]
Add a background icon to illustrate your content, it must be
specific to your content.
Example: Add a car icon if your content is related to vehicle or a house icon if it's related to home.
Body with image as background
![]()
Add a background image to illustrate your content. Like background icon, it must be
specific to your content.
Please use a monochrome image (blue-foyer is preferred).
Panel Variants
Panel arrow
header
Arrows are used to indicate that the Panel is related to another element. For now, the only arrow possible is one located on the top of the Panel. The horizontal positioning is always the middle of the Panel, and should be changed by the user if something different is expected.
Panel with click hover effect
This state just add on hover effect on your panel, use it if you have to make your panel clickable to go to an other page.
Collapsable panel
click me !
lorem ipsum..
Add .is-opened to open the panel.
let collapsablePanels = document.querySelectorAll('.Panel.is-collapsable'),
i = 1;
collapsablePanels.forEach(function(panel){
let header = panel.querySelector('.Panel-header'),
panelContent = panel.querySelector('.Panel-collapse');
panelContent.setAttribute('id', 'panel-content-' + i);
panelContent.setAttribute('tabindex', '-1');
header.setAttribute('aria-expanded', 'false');
header.setAttribute('aria-controls', 'panel-content-' + i);;
header.addEventListener('click', function(){
let parent = this.parentNode,
panelC = parent.querySelector('.Panel-collapse');
if ( parent.classList.contains('is-opened') ) {
this.setAttribute('aria-expanded', 'false');
parent.classList.remove('is-opened');
panelC.setAttribute('tabindex', '-1');
this.focus();
} else {
this.setAttribute('aria-expanded', 'true');
parent.classList.add('is-opened');
panelC.setAttribute('tabindex', '0');
panelC.focus();
}
});
i++;
});
JavaScript takes care of accessibility when it comes the time to control and open expensible elements.
.Panel-headermust control the content.aria-controlsvalue is theidvalue of the associated.Panel-collapse. JavaScript is here to associate those elements..Panel-collapsehave to be not focusable.tabindex="-1"is here for that.- When the header is triggered,
.Panel-collapsehave to be focusable and focused thanks totabindex="0"andfocus()method. - Same in the other way when you have to close the panel.
Panel with expansible sections
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum officiis consequuntur voluptatum aperiam, deleniti delectus maxime necessitatibus quibusdam repellat nulla consequatur neque illo quas minima suscipit accusamus dolore asperiores soluta!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum officiis consequuntur voluptatum aperiam, deleniti delectus maxime necessitatibus quibusdam repellat nulla consequatur neque illo quas minima suscipit accusamus dolore asperiores soluta!
panel header
section
header
section content
Add
.is-opened
to open the panel section.
Panel with body headings
...
...
States & Statuses
Panel marks
You can mark your panel to draw user attention to an element or as section validation.
Examples:
- The section is successfully completed in a form.
- The section has an issue.
Content separators
Dolor sit amet
lorem ipsum
dolor sit amet
You can manage separator spacing using
.has-margin-{size}
and
.has-no-margin.
size: 8, 16 (default), 24, 32.
Use
.is-full-width
to fit the panel width.