Styleguide - Projectname - 09.09.2025 14:42
Logo
width:
WIDTH
height:
HEIGHT
Favicon
width:
WIDTH
height:
HEIGHT
Theme colors
primary, secondary, tertiary, fourth, fifth, success, danger, warning, info, light, dark, black, whiteGrid
container
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
container width:
WIDTH
container padding:
PADDING-LEFT
row width:
WIDTH
col width:
WIDTH
col gutter width:
PADDING-LEFT
+
PADDING-LEFT
body bg color:
BODY-BACKGROUND
Colors
primary
BACKGROUND-COLOR
secondary
BACKGROUND-COLOR
tertiary
BACKGROUND-COLOR
fourth
BACKGROUND-COLOR
fifth
BACKGROUND-COLOR
success
BACKGROUND-COLOR
danger
BACKGROUND-COLOR
warning
BACKGROUND-COLOR
info
BACKGROUND-COLOR
light
BACKGROUND-COLOR
dark
BACKGROUND-COLOR
black
BACKGROUND-COLOR
white
BACKGROUND-COLOR
Headings
H1 - Titel
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
H2 - Titel
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
H3 - Titel
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
H4 - Titel
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
H5 - Titel
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
H6 - Titel
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
Font
Body Font / Paragraph
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
strong, b: strong / bold text
font-family:
FONT-FAMILY
font-weight:
FONT-WEIGHT
color:
COLOR
font-weight:
FONT-WEIGHT
color:
COLOR
hover color:
COLOR
text-decoration:
TEXT-DECORATION
hover text-decoration:
TEXT-DECORATION
Wysiwyg
Paragraph - lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit amet massa
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
strong, b: strong / bold text
font-family:
FONT-FAMILY
font-weight:
FONT-WEIGHT
color:
COLOR
font-weight:
FONT-WEIGHT
color:
COLOR
hover color:
COLOR
text-decoration:
TEXT-DECORATION
hover text-decoration:
TEXT-DECORATION
- Lorem Ipsum
- Lorem Ipsum dolor sit amet
Lorem Ipsum - Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum dolor sit amet
Lorem Ipsum - Lorem Ipsum
padding-left:
PADDING-LEFT
margin-bottom:
MARGIN-BOTTOM
line-height:
LINE-HEIGHT
list-style-type:
LIST-STYLE-TYPE
- Lorem Ipsum
- Lorem Ipsum dolor sit amet
Lorem Ipsum - Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum dolor sit amet
Lorem Ipsum - Lorem Ipsum
padding-left:
PADDING-LEFT
margin-bottom:
MARGIN-BOTTOM
line-height:
LINE-HEIGHT
list-style-type:
LIST-STYLE-TYPE
text-decoration:
TEXT-DECORATION
Typography
lead - Text
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
display-1 - Text
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
display-2 - Text
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
display-3 - Text
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
display-4 - Text
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
display-5 - Text
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
display-6 - Text
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
small - Text
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
Form
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
Input - normal
height:
HEIGHT
font-size:
FONT-SIZE
background-color:
BACKGROUND-COLOR
border:
BORDER
border-radius:
BORDER-RADIUS
height:
HEIGHT
font-size:
FONT-SIZE
background-color:
BACKGROUND-COLOR
border:
BORDER
border-radius:
BORDER-RADIUS
height:
HEIGHT
font-size:
FONT-SIZE
background-color:
BACKGROUND-COLOR
border:
BORDER
border-radius:
BORDER-RADIUS
height:
HEIGHT
font-size:
FONT-SIZE
background-color:
BACKGROUND-COLOR
border:
BORDER
border-radius:
BORDER-RADIUS
height:
HEIGHT
font-size:
FONT-SIZE
background-color:
BACKGROUND-COLOR
border:
BORDER
border-radius:
BORDER-RADIUS
height:
HEIGHT
min-height:
MIN-HEIGHT
border:
BORDER
border-radius:
BORDER-RADIUS
min-height:
MIN-HEIGHT
line-height:
LINE-HEIGHT
border-radius:
BORDER-RADIUS
Input - form-floating
height:
HEIGHT
font-size:
FONT-SIZE
background-color:
BACKGROUND-COLOR
border:
BORDER
border-radius:
BORDER-RADIUS
height:
HEIGHT
font-size:
FONT-SIZE
background-color:
BACKGROUND-COLOR
border:
BORDER
border-radius:
BORDER-RADIUS
height:
HEIGHT
font-size:
FONT-SIZE
background-color:
BACKGROUND-COLOR
border:
BORDER
border-radius:
BORDER-RADIUS
height:
HEIGHT
font-size:
FONT-SIZE
background-color:
BACKGROUND-COLOR
border:
BORDER
border-radius:
BORDER-RADIUS
height:
HEIGHT
font-size:
FONT-SIZE
background-color:
BACKGROUND-COLOR
border:
BORDER
border-radius:
BORDER-RADIUS
height:
HEIGHT
min-height:
MIN-HEIGHT
border:
BORDER
border-radius:
BORDER-RADIUS
min-height:
MIN-HEIGHT
line-height:
LINE-HEIGHT
border-radius:
BORDER-RADIUS
width:
WIDTH
height:
HEIGHT
background-color:
BACKGROUND-COLOR
border-color:
BORDER-COLOR
width:
WIDTH
height:
HEIGHT
background-color:
BACKGROUND-COLOR
border-color:
BORDER-COLOR
height:
HEIGHT
border:
BORDER
border-radius:
BORDER-RADIUS
height:
HEIGHT
border:
BORDER
border-radius:
BORDER-RADIUS
height:
HEIGHT
border:
BORDER
border-radius:
BORDER-RADIUS
Pagination
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
color active:
COLOR
color disabled:
COLOR
background-color active:
BACKGROUND-COLOR
border-color active:
BORDER-COLOR
Badges
primary
secondary
tertiary
fourth
fifth
success
danger
warning
info
light
dark
black
white
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
border-radius:
BORDER-RADIUS
Pill badges
primary
secondary
tertiary
fourth
fifth
success
danger
warning
info
light
dark
black
white
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
border-radius:
BORDER-RADIUS
Alert
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple tertiary alert—check it out!
A simple fourth alert—check it out!
A simple fifth alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
A simple black alert—check it out!
A simple white alert—check it out!
margin-bottom:
MARGIN-BOTTOM
font-family:
FONT-FAMILY
font-size:
FONT-SIZE
font-weight:
FONT-WEIGHT
line-height:
LINE-HEIGHT
color:
COLOR
letter-spacing:
LETTER-SPACING
background-color:
BACKGROUND-COLOR
Image
No picture (Placeholder)
Standard Icons
Bootstrap Icons
Spacers (bootstrap)
Spacer 0:
SPACING
Spacer 1:
SPACING
Spacer 2:
SPACING
Spacer 3:
SPACING
Spacer 4:
SPACING
Spacer 5:
SPACING
Responsive Spacers
Spacer 0:
SPACING
Spacer 1:
SPACING
Spacer 2:
SPACING
Spacer 3:
SPACING
Spacer 4:
SPACING
Spacer 5:
SPACING
Spacer 6:
SPACING
Spacer 7:
SPACING
Spacer 8:
SPACING