BF UI Styleguide
Typography
Headlines
Class
Size
Line height
Sample
is-display
80px
110%
Lorem Ipsum
is-h1
60px
120%
Heading
is-h2
48px
120%
Heading
is-h3
39px
120%
Heading
is-h4
31px
120%
Heading
is-h5
25px
130%
Heading
is-h6
20px
130%
Heading
Body copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum interdum vulputate. Vivamus blandit vitae orci nec porta. Nam euismod ipsum a arcu tincidunt pellentesque.
The font for the body copy is Inter Medium and Inter Bold. You can download the webfonts here. Please use the WOFF and WOFF2 format for better performance.
Class
Size
Line height
Sample
is-txt-large
24px
160%
Lorem Ipsum
is-txt-medium
16px
160%
Lorem Ipsum
is-txt-small
14.4px
160%
Lorem Ipsum
Typography helper classes
Class
What it does
is-txt-italic
Makes the text italic
is-txt-bold
Makes the text bold
is-txt-normal
Makes the text normal
is-txt-underlined
Makes the text underlined
is-txt-cut-2lines
Cuts the text off after two lines and ads three stops at the end
is-txt-cut-3lines
Cuts the text off after two lines and ads three stops at the end
is-txt-allcaps
Capitalizes all letters
is-txt-align-left
Aligns the text to the left
is-txt-align-center
Aligns the text to the center
is-txt-align-center
Aligns the text to the right
is-txt-align-right
Aligns the text to the right
is-txt-align-right
Makes the text bold
is-text-link
Styles the inline text link
Typography components
list--bullets
list--links
list--check
- Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.
Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.
Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.
Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
- The rich text element allows you to create and format headings,
- The rich text element allows you to create and format headings,
- The rich text element allows you to create and format headings,
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Colors
Lighten 2
Lighten 1
Base
Darken 1
Darken 2
HEX
BG Class
TXT Class
#F1FB9D
is-bg-purple-50
is-txt-purple-50
#E2F63C
is-bg-purple-75
is-txt-purple-75
#DBF40C
is-bg-purple-100
is-txt-purple-100
#AFC309
is-bg-purle-125
is-txt-purple-125
#839207
is-bg-purple-150
is-txt-purple-150
HEX
BG Class
TXT Class
#FFFFFF
is-bg-white
is-txt-white
#000000
is-bg-black
is-txt-black
HEX
BG Class
TXT Class
#CCCCCC
is-bg-gray-20
is-txt-gray-20
#999999
is-bg-gray-40
is-txt-gray-40
#666666
is-bg-gray-60
is-txt-gray-60
#333333
is-bg-gray-80
is-txt-gray-80
Buttons
Button helper classes
Class
What it does
is-btn-d-fw
The buttons width becomes 100% of its parent on desktop
is-btn-t-fw
The buttons width becomes 100% of its parent on tablet
is-btn-l-fw
The buttons width becomes 100% of its parent on mobile landscape
is-btn-p-fw
The buttons width becomes 100% of its parent on mobile portrait
Forms
Containers
ContainerEquals a max-width of 100% and 160px padding left and right
container-main
Container MediumEquals a max-width of 843px and 160px padding left and right
container-medium
Container SmallEquals a max-width of 405px and 160px padding left and right
container-small
Spacing system
Margins
Top
Bottom
Top and bottom
Em
Px
Sample
is-margin-t-4
is-margin-b-4
is-margin-tb-4
0.25em
4px
is-margin-t-8
is-margin-b-8
is-margin-tb-8
0.5em
8px
is-margin-t-16
is-margin-b-16
is-margin-tb-16
1em
16px
is-margin-t-24
is-margin-b-24
is-margin-tb-24
1.5em
24px
is-margin-t-32
is-margin-b-32
is-margin-tb-32
2em
32px
is-margin-t-40
is-margin-b-40
is-margin-tb-40
2.5em
40px
is-margin-t-48
is-margin-b-48
is-margin-tb-48
3em
48px
is-margin-t-56
is-margin-b-56
is-margin-tb-56
3.5em
56px
is-margin-t-64
is-margin-b-64
is-margin-tb-64
4em
64px
is-margin-t-72
is-margin-b-72
is-margin-tb-72
4.5em
72px
is-margin-t-80
is-margin-b-80
is-margin-tb-80
5em
80px
is-margin-t-88
is-margin-b-88
is-margin-tb-88
5.5em
88px
is-margin-t-96
is-margin-b-96
is-margin-tb-96
6em
96px
is-margin-t-104
is-margin-b-104
is-margin-tb-104
6.5em
104px
is-margin-t-112
is-margin-b-112
is-margin-tb-112
7em
112px
is-margin-t-120
is-margin-b-120
is-margin-tb-120
7.5em
120px
is-margin-t-128
is-margin-b-128
is-margin-tb-128
8em
128px
is-margin-t-136
is-margin-b-136
is-margin-tb-136
8.5em
136px
is-margin-t-144
is-margin-b-144
is-margin-tb-144
9em
144px
is-margin-t-152
is-margin-b-152
is-margin-tb-152
9.5em
152px
is-margin-t-160
is-margin-b-160
is-margin-tb-160
10em
160px
is-margin-t-168
is-margin-b-168
is-margin-tb-168
10.5em
168px
is-margin-t-176
is-margin-b-176
is-margin-tb-176
11em
176px
is-margin-t-184
is-margin-b-184
is-margin-tb-184
11.5em
184px
is-margin-t-192
is-margin-b-192
is-margin-tb-192
12em
192px
is-margin-t-200
is-margin-b-200
is-margin-tb-200
12.5em
200px
is-margin-t-208
is-margin-b-208
is-margin-tb-208
13em
208px
is-margin-t-216
is-margin-b-216
is-margin-tb-216
13.5em
216px
is-margin-t-224
is-margin-b-224
is-margin-tb-224
14em
224px
is-margin-t-232
is-margin-b-232
is-margin-tb-232
14.5em
232px
is-margin-t-240
is-margin-b-240
is-margin-tb-240
15em
240px
is-margin-t-248
is-margin-b-248
is-margin-tb-248
15.5em
248px
is-margin-t-256
is-margin-b-256
is-margin-tb-256
16em
256px
Paddings
Top
Bottom
Top and bottom
Em
Px
Sample
is-pad-t-4
is-pad-b-4
is-pad-tb-4
0.25em
4px
is-pad-t-8
is-pad-b-8
is-pad-tb-8
0.5em
8px
is-pad-t-16
is-pad-b-16
is-pad-tb-16
1em
16px
is-pad-t-24
is-pad-b-24
is-pad-tb-24
1.5em
24px
is-pad-t-32
is-pad-b-32
is-pad-tb-32
2em
32px
is-pad-t-40
is-pad-b-40
is-pad-tb-40
2.5em
40px
is-pad-t-48
is-pad-b-48
is-pad-tb-48
3em
48px
is-pad-t-56
is-pad-b-56
is-pad-tb-56
3.5em
56px
is-pad-t-64
is-pad-b-64
is-pad-tb-64
4em
64px
is-pad-t-72
is-pad-b-72
is-pad-tb-72
4.5em
72px
is-pad-t-80
is-pad-b-80
is-pad-tb-80
5em
80px
is-pad-t-88
is-pad-b-88
is-pad-tb-88
5.5em
88px
is-pad-t-96
is-pad-b-96
is-pad-tb-96
6em
96px
is-pad-t-104
is-pad-b-104
is-pad-tb-104
6.5em
104px
is-pad-t-112
is-pad-b-112
is-pad-tb-112
7em
112px
is-pad-t-120
is-pad-b-120
is-pad-tb-120
7.5em
120px
is-pad-t-128
is-pad-b-128
is-pad-tb-128
8em
128px
is-pad-t-136
is-pad-b-136
is-pad-tb-136
8.5em
136px
is-pad-t-144
is-pad-b-144
is-pad-tb-144
9em
144px
is-pad-t-152
is-pad-b-152
is-pad-tb-152
9.5em
152px
is-pad-t-160
is-pad-b-160
is-pad-tb-160
10em
160px
is-pad-t-168
is-pad-b-168
is-pad-tb-168
10.5em
168px
is-pad-t-176
is-pad-b-176
is-pad-tb-176
11em
176px
is-pad-t-184
is-pad-b-184
is-pad-tb-184
11.5em
184px
is-pad-t-192
is-pad-b-192
is-pad-tb-192
12em
192px
is-pad-t-200
is-pad-b-200
is-pad-tb-200
12.5em
200px
is-pad-t-208
is-pad-b-208
is-pad-tb-208
13em
208px
is-pad-t-216
is-pad-b-216
is-pad-tb-216
13.5em
216px
is-pad-t-224
is-pad-b-224
is-pad-tb-224
14em
224px
is-pad-t-232
is-pad-b-232
is-pad-tb-232
14.5em
232px
is-pad-t-240
is-pad-b-240
is-pad-tb-240
15em
240px
is-pad-t-248
is-pad-b-248
is-pad-tb-248
15.5em
248px
is-pad-t-256
is-pad-b-256
is-pad-tb-256
16em
256px
Misc helpers
Aspect ratios
Class
What it does
Sample
aspect-ratio-3-4
Applied to a parent div a video or image becomes an aspect ratio of 3:4
aspect-ratio-1-1
Applied to a parent div a video or image becomes an aspect ratio of 1:1
aspect-ratio-4-3
Applied to a parent div a video or image becomes an aspect ratio of 4:3
aspect-ratio-16-9
Applied to a parent div a video or image becomes an aspect ratio of 16:9
aspect-ratio-2-1
Applied to a parent div a video or image becomes an aspect ratio of 2:1
Flex helpers
Class
What it does
wrap-flex-vert-c
Applied to a parent div it becomes display flex and vertical centered
wrap-flex-vert-c
Applied to a parent div it becomes display flex and vertical centered
wrap-flex-hor-c
Applied to a parent div it becomes display flex and horizontal centered
wrap-flex-hor-c
Applied to a parent div it becomes display flex and vertical centered
Show and hide
Class
What it does
is-d-visible
Is displayed on desktop
is-d-visible
Is displayed on desktop
is-d-hidden
Is hidden on desktop
is-d-hidden
Is hidden on desktop
is-t-visible
Is displayed from tablet and down
is-t-visible
Is displayed from tablet and down
is-t-hidden
Is hidden from tablet and down
is-t-hidden
Is hidden from tablet and down
is-l-visible
Is displayed from landscape mobile and down
is-l-visible
Is displayed from landscape mobile and down
is-l-hidden
Is hidden from landscape mobile and down
is-l-hidden
Is hidden from landscape mobile and down
is-p-visible
Is displayed from portrait mobile and down
is-p-visible
Is displayed from portrait mobile and down
is-p-hidden
Is hidden from landscape mobile and down
is-p-hidden
Is hidden from landscape mobile and down
Actual classes (margins)
is-margin-t-4
is-margin-b-4
is-margin-tb-4
is-margin-t-8
is-margin-b-8
is-margin-tb-8
is-margin-t-16
is-margin-b-16
is-margin-tb-16
is-margin-t-24
is-margin-b-24
is-margin-tb-24
is-margin-t-32
is-margin-b-32
is-margin-tb-32
is-margin-t-40
is-margin-b-40
is-margin-tb-40
is-margin-t-48
is-margin-b-48
is-margin-tb-48
is-margin-t-56
is-margin-b-56
is-margin-tb-56
is-margin-t-64
is-margin-b-64
is-margin-tb-64
is-margin-t-72
is-margin-b-72
is-margin-tb-72
is-margin-t-80
is-margin-b-80
is-margin-tb-80
is-margin-t-88
is-margin-b-88
is-margin-tb-88
is-margin-t-96
is-margin-b-96
is-margin-tb-96
is-margin-t-104
is-margin-b-104
is-margin-tb-104
is-margin-t-112
is-margin-b-112
is-margin-tb-112
is-margin-t-120
is-margin-b-120
is-margin-tb-120
is-margin-t-128
is-margin-b-128
is-margin-tb-128
is-margin-t-136
is-margin-b-136
is-margin-tb-136
is-margin-t-144
is-margin-b-144
is-margin-tb-144
is-margin-t-152
is-margin-b-152
is-margin-tb-152
is-margin-t-160
is-margin-b-160
is-margin-tb-160
is-margin-t-168
is-margin-b-168
is-margin-tb-168
is-margin-t-176
is-margin-b-176
is-margin-tb-176
is-margin-t-184
is-margin-b-184
is-margin-tb-184
is-margin-t-192
is-margin-b-192
is-margin-tb-192
is-margin-t-200
is-margin-b-200
is-margin-tb-200
is-margin-t-208
is-margin-b-208
is-margin-tb-208
is-margin-t-216
is-margin-b-216
is-margin-tb-216
is-margin-t-224
is-margin-b-224
is-margin-tb-224
is-margin-t-232
is-margin-b-232
is-margin-tb-232
is-margin-t-240
is-margin-b-240
is-margin-tb-240
is-margin-t-248
is-margin-b-248
is-margin-tb-248
is-margin-t-256
is-margin-b-256
is-margin-tb-256
Actual classes (paddings)
is-pad-t-4
is-pad-b-4
is-pad-tb-4
is-pad-t-8
is-pad-b-8
is-pad-tb-8
is-pad-t-16
is-pad-b-16
is-pad-tb-16
is-pad-t-24
is-pad-b-24
is-pad-tb-24
is-pad-t-32
is-pad-b-32
is-pad-tb-32
is-pad-t-40
is-pad-b-40
is-pad-tb-40
is-pad-t-48
is-pad-b-48
is-pad-tb-48
is-pad-t-56
is-pad-b-56
is-pad-tb-56
is-pad-t-64
is-pad-b-64
is-pad-tb-64
is-pad-t-72
is-pad-b-72
is-pad-tb-72
is-pad-t-80
is-pad-b-80
is-pad-tb-80
is-pad-t-88
is-pad-b-88
is-pad-tb-88
is-pad-t-96
is-pad-b-96
is-pad-tb-96
is-pad-t-104
is-pad-b-104
is-pad-tb-104
is-pad-t-112
is-pad-b-112
is-pad-tb-112
is-pad-t-120
is-pad-b-120
is-pad-tb-120
is-pad-t-128
is-pad-b-128
is-pad-tb-128
is-pad-t-136
is-pad-b-136
is-pad-tb-136
is-pad-t-144
is-pad-b-144
is-pad-tb-144
is-pad-t-152
is-pad-b-152
is-pad-tb-152
is-pad-t-160
is-pad-b-160
is-pad-tb-160
is-pad-t-168
is-pad-b-168
is-pad-tb-168
is-pad-t-176
is-pad-b-176
is-pad-tb-176
is-pad-t-184
is-pad-b-184
is-pad-tb-184
is-pad-t-192
is-pad-b-192
is-pad-tb-192
is-pad-t-200
is-pad-b-200
is-pad-tb-200
is-pad-t-208
is-pad-b-208
is-pad-tb-208
is-pad-t-216
is-pad-b-216
is-pad-tb-216
is-pad-t-224
is-pad-b-224
is-pad-tb-224
is-pad-t-232
is-pad-b-232
is-pad-tb-232
is-pad-t-240
is-pad-b-240
is-pad-tb-240
is-pad-t-248
is-pad-b-248
is-pad-tb-248
is-pad-t-256
is-pad-b-256
is-pad-tb-256