Fonts
Roboto Light (300)
Roboto Regular (400)
Roboto Medium (500)
Headlines
Headline h1
Headline h2
Headline h3
Headline h4
.headlineLinks
Colors
Primary
Secondary
Black to White
Brand Info
Brand Success
Brand Warning
Brand Error
Badges
Badge
Badge
Reversed
Badge Small
Badge
Reversed
Primary
Badge
Reversed
Primary Small
Badge
Reversed
Secondary
Badge
Reversed
Secondary Small
Badge
Reversed
Info
Badge
Reversed
Info Small
Badge
Reversed
Success
Badge
Reversed
Success Small
Badge
Reversed
Warning
Badge
Reversed
Warning Small
Badge
Reversed
Error
Badge
Reversed
Error Small
Badge
Reversed
Boxes
All defaults (e.g. backgrounds) can be added
Box
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
BPF Box Transparent
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Rows
Forms
Can be <form /> or .form
Defaults
Background
Primary BG
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Secondary BG
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Black to White BG
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Brand Info BG
Text
Text
Brand Success BG
Text
Text
Brand Warning BG
Text
Text
Brand Error BG
Text
Text
Text
Primary
Text, Text, Text, Text, Text, Text, Text, Text, Text, Text
Secondary
Text, Text, Text, Text, Text, Text, Text, Text, Text, Text
Black to White
Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text
Brand Info
Text, Text
Brand Success
Text, Text
Brand Warning
Text, Text
Brand Error
Text, Text
BPF Icons
Generated with Icomoon
.icon-wheel
\e900
\e900
.icon-tent
\e902
\e902
.icon-community
\e901
\e901
.icon-distance
\e904
\e904
.icon-altitude
\e903
\e903
.icon-shelter
\e907
\e907
.icon-shelter_finnhuette
\e905
\e905
.icon-weather-shelter
\e906
\e906
.icon-cave
\e90c
\e90c
.icon-drop
\e908
\e908
.icon-star
\e90a
\e90a
.icon-star1
\e909
\e909
.icon-thumb
\e90b
\e90b
.icon-wallet
\e90d
\e90d
.icon-helmet
\e90c
\e90c
.icon-web
\e90f
\e90f
.icon-instagram
\e910
\e910
.icon-x
\e911
\e911
.icon-facebook
\e912
\e912
.icon-start
\e913
\e913
.icon-goal
\e914
\e914
.icon-deadline
\e915
\e915
Table
1
2
3
1
2
3
1
2
3