Styles
h1 heading
h2 heading
h3 heading
h4 heading
h5 heading
h6 heading
This is a paragraph modipiciis2 dolupta2 dollatem quissi cumquassunte this is a link ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
- This is an unordered list utet unt.
- Event ut dest quassimus re cusdani scitatiorrum reptio. Et ea nonsequiam re dolupta spelendem solor aut harum
- qui il mod quatusda
- comnim volo et porum
- quassimus re cusdani scitatiorrum reptio.
- voluptatis evel et voluptia cumquam quia que con num aciam
This is a bold link Alit expersp edipicaepra sunt ullabor epeles endae in consedio ipiendam facea vent dolupti onsecest, sit labor sincia doluptam nis et alitat alistru ptibus nonempo ssimpore modi berestrum ius, nis ium ut rem nullendios cum nes qui conseru ptataspe pore dolorat ecest, te cones ditios istis dolorum res ne net dolor si nobitam.
- This is an ordered list Della sit il ereped utet unt.
- Event ut dest quassimus re cusdani scitatiorrum reptio. Et ea nonsequiam re dolupta spelendem solor aut harum
- voluptatis evel et voluptia cumquam quia que con num aciam
This is a blockquote Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
Font 1
Font 1 Regular 400
Font 2
Font 2 Regular 400
Font 2 Medium 500
Font 2 Semi-Bold 600
Font 2 Bold 700
<h1> Lorem ipsum dolor sit amet
Modipiciis dolupta dollatem quissi cumquassunte This is a link ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
<h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
<h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
<h4> Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Modipiciis dolupta This is a link dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
<h5> Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
<h6> Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.
Global Color Palette
white
var(--white)#ffffff
error
var(--error)#ff4e7a
Buttons
The buttons styles below are set globally in the style.css file.
They apply to the default button, and to alternative buttons via custom classes.
These global styles cannot or shouldn't be locally override via the BB Button UI. It is recommended to use the global styles classes and leave the UI styles blank.
Solid
Default
button
starter-bt-small
Outline
starter-bt-outline
Solid
starter-dark-bg
button starter-dark-bg
starter-bt-small starter-dark-bg
Outline
starter-bt-outline starter-dark-bg
Custom CSS helpers
Remove <p> paragraph bottom margin
starter-text-no-margin-b
- Remove <ul> list left margin
- Pariatur duis eu sint. In velit culpa occaecat voluptate non ut fugiat. Amet sint.
- Incididunt ipsum elit ex voluptate quis pariatur est enim.
starter-list-no-margin-l
Text XXXL
starter-text-xxxl
Text XXL
starter-text-xxl
Text XL
starter-text-xl
Text L
starter-text-l
Text M
starter-text-m
Text S
starter-text-s
Note
starter-note
Heading Fake h1
Make other <hn> or <p> look like h1
starter-heading-fake-h1
Heading Fake h2
Make other <hn> or <p> look like h2
starter-heading-fake-h2
Heading Fake h3
Make other <hn> or <p> look like h3
starter-heading-fake-h3
Heading Fake h4
Make other <hn> or <p> look like h4
starter-heading-fake-h4
Heading Fake h5
Make other <hn> or <p> look like h5
starter-heading-fake-h5
Heading Fake h6
Make other <hn> or <p> look like h6
starter-heading-fake-h6
Limit width on mobile (either item itself or direct child) + center horizontally
Max width value is predefined in the global stylesheet
starter-mobile-max-width
Limit item width on mobile
starter-mobile-max-width-narrow
Limit item width on mobile (narrow)
starter-mobile-max-width-child
Limit item direct child width on mobile
starter-mobile-max-width-child-narrow
Limit item direct child width on mobile (narrow)
Local Icons
font-family
Icons-Set-Name
st-icon-search / e900
Accessibility Colour Matrix
| Colour | white #ffffff | error #ff4e7a |
|---|---|---|
| white #ffffff | ||
| error #ff4e7a |