Banners
The banner component can be used to show extra information or enable interactions with the user without affecting the main content area of the website.
Default banner
Use this example of a dismissable banner component to show extra information relative to the main content area of the page based on a sticky positition.
Default banner
html
<div
id="banner"
tabindex="-1"
class="flex fixed z-50 gap-8 justify-between items-start py-3 px-4 w-full bg-gray-50 border border-b border-gray-200 sm:items-center dark:border-gray-700 lg:py-4 dark:bg-gray-800"
>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our
<a
class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
href="#"
>limited-time sale</a
>
for Designer Search + Job Board. Unlimited access to over 190K top-ranked
candidates and the #1 design job board.
</p>
<button
data-collapse-toggle="banner"
type="button"
class="flex items-center text-gray-400 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 dark:hover:bg-gray-600 dark:hover:text-white"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Informational banner
This example can be used to show informational context such as upcoming maintenance of the website positioned to the top side of the page.
Informational banner
html
<div
id="banner"
tabindex="-1"
class="flex fixed z-50 flex-col justify-between items-start py-3 px-4 w-full bg-gray-50 border border-b border-gray-200 md:gap-8 md:items-center md:flex-row dark:border-gray-700 lg:py-4 dark:bg-gray-800"
>
<div class="sm:flex xl:items-center">
<svg
class="hidden mr-3 mb-3 w-5 h-5 lg:flex sm:mb-0 text-primary-600 dark:text-primary-500 shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
></path>
</svg>
<p class="mb-4 text-sm text-gray-500 dark:text-gray-300 md:mb-0">
Flowbite will no longer process new data in standard properties beginning
<span class="font-medium text-gray-900 dark:text-white">July 1, 2023</span
>. Prepare now by setting up and switching over to a Flowbite 4 property.
</p>
</div>
<div class="flex items-center space-x-4 items-cente lg:pl-10 shrink-0">
<button
type="button"
data-collapse-toggle="banner"
class="text-sm font-medium text-primary-600 dark:text-primary-500 hover:underline"
>
Dismiss
</button>
<a
href="#"
class="text-sm font-medium text-primary-600 dark:text-primary-500 hover:underline"
>Learn more</a
>
<a
href="#"
class="py-2 px-4 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-auto hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>Let's go</a
>
</div>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
Announcement banner
Use this example of a banner component to announce new features or changes to the website including a badge, description text and CTA link.
Announcement banner
html
<div
id="banner"
tabindex="-1"
class="flex fixed z-50 justify-between py-3 px-4 w-full bg-gray-50 border border-b border-gray-200 dark:border-gray-700 dark:bg-gray-800"
>
<div class="flex items-center mx-auto">
<p class="text-sm font-medium text-gray-900 md:my-0 dark:text-white">
<span
class="hidden md:inline-flex bg-primary-100 text-primary-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800"
>New</span
>
We have launched Flowbite Blocks including over 120+ website sections!
<a
href="#"
class="inline-flex items-center ml-0 text-sm font-medium text-primary-600 md:ml-2 dark:text-primary-500 hover:underline"
>
Check it out
<svg
class="ml-1 w-4 h-4 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</p>
</div>
<button
data-collapse-toggle="banner"
type="button"
class="inline-flex justify-center items-center text-gray-400 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 dark:hover:bg-gray-600 dark:hover:text-white"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
Launch banner
This example can be used if you launched a new feature or product on your website by providing the logo and a CTA link.
Launch banner
html
<div
id="banner"
tabindex="-1"
class="flex fixed z-50 justify-between py-3 px-4 w-full bg-gray-50 border border-b border-gray-200 dark:border-gray-700 lg:py-4 dark:bg-gray-800"
>
<div class="flex items-center md:mx-auto">
<a
href="#"
class="hidden items-center mr-3 text-xl font-semibold text-gray-900 sm:flex dark:text-white"
>
<svg
class="mr-2 h-7"
viewBox="0 0 33 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M25.2696 13.126C25.1955 13.6364 24.8589 14.3299 24.4728 14.9328C23.9856 15.6936 23.2125 16.2264 22.3276 16.4114L18.43 17.2265C17.8035 17.3575 17.2355 17.6853 16.8089 18.1621L14.2533 21.0188C13.773 21.5556 13.4373 21.4276 13.4373 20.7075C13.4315 20.7342 12.1689 23.9903 15.5149 25.9202C16.8005 26.6618 18.6511 26.3953 19.9367 25.6538L26.7486 21.7247C29.2961 20.2553 31.0948 17.7695 31.6926 14.892C31.7163 14.7781 31.7345 14.6639 31.7542 14.5498L25.2696 13.126Z"
fill="url(#paint0_linear_11430_22515)"
/>
<path
d="M23.5028 9.20133C24.7884 9.94288 25.3137 11.0469 25.3137 12.53C25.3137 12.7313 25.2979 12.9302 25.2694 13.1261L28.0141 14.3051L31.754 14.5499C32.2329 11.7784 31.2944 8.92561 29.612 6.65804C28.3459 4.9516 26.7167 3.47073 24.7581 2.34097C23.167 1.42325 21.5136 0.818599 19.8525 0.486816L17.9861 2.90382L17.3965 5.67918L23.5028 9.20133Z"
fill="url(#paint1_linear_11430_22515)"
/>
<path
d="M1.5336 11.2352C1.5329 11.2373 1.53483 11.238 1.53556 11.2358C1.67958 10.8038 1.86018 10.3219 2.08564 9.80704C3.26334 7.11765 5.53286 5.32397 8.32492 4.40943C11.117 3.49491 14.1655 3.81547 16.7101 5.28323L17.3965 5.67913L19.8525 0.486761C12.041 -1.07341 4.05728 3.51588 1.54353 11.2051C1.54233 11.2087 1.53796 11.2216 1.5336 11.2352Z"
fill="url(#paint2_linear_11430_22515)"
/>
<path
d="M19.6699 25.6538C18.3843 26.3953 16.8003 26.3953 15.5147 25.6538C15.3402 25.5531 15.1757 25.4399 15.0201 25.3174L12.7591 26.8719L10.8103 30.0209C12.9733 31.821 15.7821 32.3997 18.589 32.0779C20.7013 31.8357 22.7995 31.1665 24.7582 30.0368C26.3492 29.1191 27.7 27.9909 28.8182 26.7195L27.6563 23.8962L25.7762 22.1316L19.6699 25.6538Z"
fill="url(#paint3_linear_11430_22515)"
/>
<path
d="M15.0201 25.3175C14.0296 24.5373 13.4371 23.3406 13.4371 22.0588V21.931V11.2558C13.4371 10.6521 13.615 10.5494 14.1384 10.8513C13.3323 10.3864 11.4703 8.79036 9.17118 10.1165C7.88557 10.858 6.8269 12.4949 6.8269 13.978V21.8362C6.8269 24.775 8.34906 27.8406 10.5445 29.7966C10.6313 29.874 10.7212 29.9469 10.8103 30.0211L15.0201 25.3175Z"
fill="url(#paint4_linear_11430_22515)"
/>
<path
d="M28.6604 5.49565C28.6589 5.49395 28.6573 5.49532 28.6589 5.49703C28.9613 5.83763 29.2888 6.23485 29.6223 6.68734C31.3648 9.05099 32.0158 12.0447 31.4126 14.9176C30.8093 17.7906 29.0071 20.2679 26.4625 21.7357L25.7761 22.1316L28.8181 26.7195C34.0764 20.741 34.09 11.5388 28.6815 5.51929C28.6789 5.51641 28.67 5.50622 28.6604 5.49565Z"
fill="url(#paint5_linear_11430_22515)"
/>
<path
d="M7.09355 13.978C7.09354 12.4949 7.88551 11.1244 9.17113 10.3829C9.34564 10.2822 9.52601 10.1965 9.71002 10.1231L9.49304 7.38962L7.96861 4.26221C5.32671 5.23364 3.1897 7.24125 2.06528 9.83067C1.2191 11.7793 0.75001 13.9294 0.75 16.1888C0.75 18.0243 1.05255 19.7571 1.59553 21.3603L4.62391 21.7666L7.09355 21.0223V13.978Z"
fill="url(#paint6_linear_11430_22515)"
/>
<path
d="M9.71016 10.1231C10.8817 9.65623 12.2153 9.74199 13.3264 10.3829L13.4372 10.4468L22.3326 15.5777C22.9566 15.9376 22.8999 16.2918 22.1946 16.4392L22.7078 16.332C23.383 16.1908 23.9999 15.8457 24.4717 15.3428C25.2828 14.4782 25.5806 13.4351 25.5806 12.5299C25.5806 11.0468 24.7886 9.67634 23.503 8.93479L16.6911 5.00568C14.1436 3.53627 11.0895 3.22294 8.29622 4.14442C8.18572 4.18087 8.07756 4.2222 7.96875 4.26221L9.71016 10.1231Z"
fill="url(#paint7_linear_11430_22515)"
/>
<path
d="M20.0721 31.8357C20.0744 31.8352 20.0739 31.8332 20.0717 31.8337C19.6252 31.925 19.1172 32.0097 18.5581 32.0721C15.638 32.3978 12.7174 31.4643 10.5286 29.5059C8.33986 27.5474 7.09347 24.7495 7.09348 21.814L7.09347 21.0222L1.59546 21.3602C4.1488 28.8989 12.1189 33.5118 20.0411 31.8421C20.0449 31.8413 20.0582 31.8387 20.0721 31.8357Z"
fill="url(#paint8_linear_11430_22515)"
/>
<defs>
<linearGradient
id="paint0_linear_11430_22515"
x1="20.8102"
y1="23.9532"
x2="23.9577"
y2="12.9901"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient
id="paint1_linear_11430_22515"
x1="28.0593"
y1="10.5837"
x2="19.7797"
y2="2.33321"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient
id="paint2_linear_11430_22515"
x1="16.9145"
y1="5.2045"
x2="4.42432"
y2="5.99375"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient
id="paint3_linear_11430_22515"
x1="16.0698"
y1="28.846"
x2="27.2866"
y2="25.8192"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient
id="paint4_linear_11430_22515"
x1="8.01881"
y1="15.8661"
x2="15.9825"
y2="24.1181"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient
id="paint5_linear_11430_22515"
x1="26.2004"
y1="21.8189"
x2="31.7569"
y2="10.6178"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient
id="paint6_linear_11430_22515"
x1="6.11387"
y1="9.31427"
x2="3.14054"
y2="20.4898"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient
id="paint7_linear_11430_22515"
x1="21.2932"
y1="8.78271"
x2="10.4278"
y2="11.488"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient
id="paint8_linear_11430_22515"
x1="7.15667"
y1="21.5399"
x2="14.0824"
y2="31.9579"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
</defs>
</svg>
Flowbite
</a>
<a
href="#"
class="flex items-center text-sm text-primary-600 hover:underline dark:text-primary-500"
>
We launched Marketing UI Blocks
<svg
class="ml-1 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
></path>
<path
d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
></path>
</svg>
</a>
</div>
<button
data-collapse-toggle="banner"
type="button"
class="inline-flex justify-center items-center text-gray-400 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 dark:hover:bg-gray-600 dark:hover:text-white"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
CTA banner
Get started with this example of a banner component to also show a CTA button such as booking a call or signing up for a demo of a product.
CTA banner
html
<div
id="banner"
tabindex="-1"
class="grid fixed z-50 py-3 px-4 w-full bg-gray-50 border border-b border-gray-200 dark:border-gray-700 sm:grid-cols-3 dark:bg-gray-800"
>
<div class="pr-6 mb-3 sm:col-span-2 sm:mb-0 sm:pr-0">
<p class="mb-1 font-bold text-gray-900 dark:text-white">
I hope you enjoyed reading this post.
</p>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">
If you want my team at Flowbite Digital to help you get more traffic, just
book a call.
</p>
</div>
<div class="flex justify-start sm:justify-end">
<div class="flex items-center sm:space-x-4">
<a
href="#"
class="flex items-center py-2 px-4 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-auto hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
<svg
class="mr-2 -ml-1 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
Book a call
</a>
<button
data-collapse-toggle="banner"
type="button"
class="absolute lg:static top-1 right-1 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
</div>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55