Back to components

Panel

Expandable panels contain creation flows and allow lightweight editing of an element.

Preview

Table of Contents

Edit this section, Opens in new window

Overview

An expandable panel is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.

Edit this section, Opens in new window

Variations

Type Purpose
Expandable panel Default expandable panel
Selectable expandable panel A panel that is both selectable and expandable
Edit this section, Opens in new window

Usage

Column 1
Column 2
Column 3
Panel with columns

A panel can have columns, with the usage of grid.

Column 1
Column 2
Column 3
Column 1
Column 3
Column 1
Column 3
Grouped panels

Panels can be grouped.

Expandable panel

A panel can be expandable.

Grouped expandable panels

Expandable panels can be grouped.

Selectable

A panel can also be selectable.

Edit this section, Opens in new window

Behaviours

Interactions

Static

Hovered

Focused

Open

Edit this section, Opens in new window

Anatomy

Expandable panel
  1. Open expandable panel
  2. Title
  3. Content
Panel
  1. Panel
  2. Title
Tips och råd
Tips och råd
Panel with content
  1. Content
  2. Panel
  3. Title
Edit this section, Opens in new window

Specs

Title
Panel
Title
Panel
Expandable panel
Selectable expandable panel
Selectable panel
Edit this section, Opens in new window
Contact us, Opens in new window