Expandable section

expandable section

Introduction

The expandable section is used to show and hide information.

Exandable section example

Styleguide

Exandable section styleguide

x: 4px
y: 20px
z: 12px

Exandable section styleguide

Icon

width: 16px
height: 16px
icon-color: $turquoise-600

Name

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-500
padding-left: 4px
padding-right: 4px

Line

border-bottom: 1px solid $gray-400

Hover state

Exandable section hover state

font-color: $gray-700
icon-color: $turquoise-700
line-color: $gray-500

Disabled state

Exandable section disabled state

icon-color: $gray-300

Combination with other components

Currently, the expandable section is used in combination with several components, e.g. Tags