BPF Styleguide

Nur für uns intern. Eine Auflistung aller Grundstyles und Grundelemente, die auf dieser Seite genutzt werden können. Also quasi unsere CI.

Fonts

Roboto Light (300)
Roboto Regular (400)
Roboto Medium (500)

Barlow Condensed Medium (500)
Barlow Condensed SemiBold (600)

Headlines

Headline h1

Headline h2

Headline h3

Headline h4

.headline

Links

Link

Colors

Primary
Secondary
Tertiary
Black to White
Brand Info
Brand Success
Brand Warning
Brand Error

Buttons

Button
Button Inactive Reversed Reversed Inactive ★ Icon
Button Small
Button Inactive Reversed Reversed Inactive ★ Icon

Primary
Button Inactive Reversed Reversed Inactive ★ Icon
Primary Small
Button Inactive Reversed Reversed Inactive ★ Icon

Secondary
Button Inactive Reversed Reversed Inactive ★ Icon
Secondary Small
Button Inactive Reversed Reversed Inactive ★ Icon

Tertiary
Button Inactive Reversed Reversed Inactive ★ Icon
Tertiary Small
Button Inactive Reversed Reversed Inactive ★ Icon

Info
Button Inactive Reversed Reversed Inactive ★ Icon
Info Small
Button Inactive Reversed Reversed Inactive ★ Icon

Success
Button Inactive Reversed Reversed Inactive ★ Icon
Success Small
Button Inactive Reversed Reversed Inactive ★ Icon

Warning
Button Inactive Reversed Reversed Inactive ★ Icon
Warning Small
Button Inactive Reversed Reversed Inactive ★ Icon

Error
Button Inactive Reversed Reversed Inactive ★ Icon
Error Small
Button Inactive Reversed Reversed Inactive ★ Icon

Badges

Badge
Badge Reversed ★ Icon
Badge Small
Badge Reversed ★ Icon

Primary
Badge Reversed ★ Icon
Primary Small
Badge Reversed ★ Icon

Secondary
Badge Reversed ★ Icon
Secondary Small
Badge Reversed ★ Icon

Tertiary
Badge Reversed ★ Icon
Tertiary Small
Badge Reversed ★ Icon

Info
Badge Reversed ★ Icon
Info Small
Badge Reversed ★ Icon

Success
Badge Reversed ★ Icon
Success Small
Badge Reversed ★ Icon

Warning
Badge Reversed ★ Icon
Warning Small
Badge Reversed ★ Icon

Error
Badge Reversed ★ Icon
Error Small
Badge Reversed ★ Icon

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
Tertiary 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
Tertiary
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
.icon-tent
\e902
.icon-community
\e901
.icon-distance
\e904
.icon-altitude
\e903
.icon-shelter
\e907
.icon-shelter_finnhuette
\e905
.icon-weather-shelter
\e906
.icon-cave
\e90c
.icon-drop
\e908
.icon-star
\e90a
.icon-star1
\e909
.icon-thumb
\e90b
.icon-wallet
\e90d
.icon-helmet
\e90c
.icon-web
\e90f
.icon-instagram
\e910
.icon-x
\e911
.icon-facebook
\e912
.icon-start
\e913
.icon-goal
\e914
.icon-deadline
\e915
.icon-mail
\e916

Table

1
2
3
1
2
3
1
2
3