Let's have fun
Let's have fun
Header
Info
The header class is created with the flexbox method and the alignment ensures that the contents of the header columns are horizontally and vertically centered. The header columns are responsive in the 4 breakpoints.
Header
Header text
Header subtext
header
header-col-sm
header-col-md
header-col-lg
header-col-xl
header-text
header-subtext
<header class="header">
<div class="header-col-md">
<img alt="logo" src="">
<p><a href="">Link</a></p>
</div>
<div class="header-col-md">
<p class="header-text">Header tekst</p>
<p class="header-subtext">Header subtekst</p>
</div>
</header>
Header colors
Black
Text
Subtext
header-black
<header class="header header-black"></header>
White
Text
Subtext
header-white
<header class="header header-white"></header>
Gray
Text
Subtext
header-gray
<header class="header header-gray"></header>
Blue
Text
Subtext
header-blue
<header class="header header-blue"></header>
Green
Text
Subtext
header-green
<header class="header header-green"></header>
Teal
Text
Subtext
header-teal
<header class="header header-teal"></header>
Red
Text
Subtext
header-red
<header class="header header-red"></header>
Yellow
Text
Subtext
header-yellow
<header class="header header-yellow"></header>
Orange
Text
Subtext
header-orange
<header class="header header-orange"></header>
Brown
Text
Subtext
header-brown
<header class="header header-brown"></header>
Purple
Text
Subtext
header-purple
<header class="header header-purple"></header>
Pink
Text
Subtext
header-pink
<header class="header header-pink"></header>