Card

card content layout

Introduction

A card structures and groups content and other components. Typically, a view consists of multiple cards.

Card example

Styleguide

font-family: Bernina Sans Regular
font-size: 14px
background-color: #fff
border-radius: 3px
padding: 8px
margin: 8px

Card styleguide

Headline

font-family: Bernina Sans Light
font-size: 24px
line-height: 1.6
color: $gray-700

Subheadline

font-size: 14px
line-height: 1.6
color: $gray-700

Icon (optional)

width: 44px
height: 44px
margin-right: 12px

Distances

x: 8px
y: 20px

Hover, Active and disabled state

The card is not an interactive element, therefore, there are no hover, active or disabled states for cards.

Responsive behavior

Margins and paddings will change depending on the container size. Therefore we defined the following breakpoints.

Default

margin: 8px
padding: 8px

Container min-width: 460px

margin: 8px
padding: 12px

Container min-width: 992px

margin: 16px
padding: 16px

Container min-width: 1200px

margin: 20px
padding: 16px