Boxes
Article Box
A card with an image, a slogan and a title, linking to an article or page.
Content
| Setting |
Type |
Default |
Details |
| Image |
Image |
— |
|
| Slogan |
Text |
Article |
|
| Title |
Text |
Article box |
|
| Title HTML tag |
List |
H4 |
Choices: H2 · H3 · H4 · H5 · H6 · Paragraph. |
| Link |
Address |
— |
|
| Open in a new tab |
On / off |
Off |
|
Style
| Setting |
Type |
Default |
Details |
| Card color |
Color |
— |
|
| Accent color |
Color |
— |
|
Call to Action
A strip with a title, a line of text and a button.
Content
| Setting |
Type |
Default |
Details |
| Icon |
Icon |
— |
|
| Title |
Text |
Ready to get started? |
|
| Title HTML tag |
List |
H3 |
Choices: H2 · H3 · H4 · H5 · H6 · Paragraph. |
| Text |
Long text |
Join thousands of happy customers today. |
|
| Button text |
Text |
Get started |
Empty: no button. |
| Link |
Address |
— |
|
| Open in a new tab |
On / off |
Off |
|
| Button style |
List |
Primary |
Choices: Primary · Secondary · Outline · Light · Text link. |
| Layout |
List |
Text and button in a row |
Choices: Text and button in a row · Button below the text. |
| Alignment |
List |
— |
Per device. Choices: Default · Start · Center · End. |
Address, phones, email and website in one box, over an optional image.
Content
| Setting |
Type |
Default |
Details |
| Title |
Text |
Contact us |
|
| Title HTML tag |
List |
H3 |
Choices: H2 · H3 · H4 · H5 · H6 · Paragraph. |
| Address |
Long text |
— |
|
| Phone |
Text |
— |
|
| Second phone |
Text |
— |
|
| Email |
Email |
— |
|
| Website |
Address |
— |
|
| Background image |
Image |
— |
|
Style
| Setting |
Type |
Default |
Details |
| Overlay color |
Color |
— |
Darkens the background image so the text stays readable. |
| Icon color |
Color |
— |
|
Feature Box
An image above or beside a title, text and a button.
Content
| Setting |
Type |
Default |
Details |
| Image |
Image |
— |
|
| Title |
Text |
Feature box |
|
| Title HTML tag |
List |
H4 |
Choices: H2 · H3 · H4 · H5 · H6 · Paragraph. |
| Text |
Long text |
A short text on a colored panel. |
|
| Link |
Address |
— |
|
| Open in a new tab |
On / off |
Off |
|
| Button text |
Text |
— |
Empty: no button. |
| Button style |
List |
Light |
Choices: Primary · Secondary · Outline · Light · Text link. |
| Layout |
List |
Image above |
Choices: Image above · Image at the start. |
| Image shape |
List |
Original |
Choices: Original · Square · 4:3 · 16:9 · Portrait 3:4. |
Style
| Setting |
Type |
Default |
Details |
| Panel color |
Color |
— |
Empty uses the theme color. |
| Panel text color |
Color |
— |
|
Flat Box
A box with an image or icon, a title and text.
Content
| Setting |
Type |
Default |
Details |
| Image |
Image |
— |
|
| Icon |
Icon |
bi:brush |
|
| Title |
Text |
Flat box |
|
| Title HTML tag |
List |
H4 |
Choices: H2 · H3 · H4 · H5 · H6 · Paragraph. |
| Text |
Long text |
An image with an icon on its corner, and a shor… |
|
| Link |
Address |
— |
|
| Open in a new tab |
On / off |
Off |
|
| Image shape |
List |
4:3 |
Choices: Original · Square · 4:3 · 16:9 · Portrait 3:4. |
Style
| Setting |
Type |
Default |
Details |
| Icon background |
Color |
— |
Empty uses the theme color. |
| Icon color |
Color |
— |
|
Hover Box
An image that changes to a second image on hover.
Content
| Setting |
Type |
Default |
Details |
| Image |
Image |
— |
|
| Image on hover |
Image |
— |
Use an image of the same size. |
| Link |
Address |
— |
|
| Open in a new tab |
On / off |
Off |
|
| Change |
List |
Fade |
Choices: Fade · Slide up · Zoom. |
Hover Color
A box whose colors change on hover.
Content
| Setting |
Type |
Default |
Details |
| Content |
HTML |
<h4>Hover color</h4><p>This box changes color w… |
|
| Link |
Address |
— |
|
| Open in a new tab |
On / off |
Off |
|
| Alignment |
List |
— |
Per device. Choices: Default (center) · Start · Center · End. |
Style
| Setting |
Type |
Default |
Details |
| Box color |
Color |
— |
|
| Box color on hover |
Color |
— |
Empty uses the theme color. |
| Text color on hover |
Color |
— |
|
| Border color |
Color |
— |
|
Icon Box
An icon or image above or beside a title, text and a button.
Content
| Setting |
Type |
Default |
Details |
| Show |
List |
Icon |
Choices: Icon · Image · Nothing. |
| Icon |
Icon |
bi:lightning-charge |
|
| Image |
Image |
— |
|
| Title |
Text |
Icon box |
|
| Title HTML tag |
List |
H4 |
Choices: H2 · H3 · H4 · H5 · H6 · Paragraph. |
| Text |
Long text |
Explain this service or feature in a sentence o… |
|
| Link |
Address |
— |
|
| Open in a new tab |
On / off |
Off |
|
| Button text |
Text |
— |
Empty: no button. |
| Button style |
List |
Text link |
Choices: Primary · Secondary · Outline · Light · Text link. |
| Layout |
List |
Icon above the text |
Choices: Icon above the text · Icon at the start · Icon at the end. |
| Icon style |
List |
In a circle |
Choices: Plain · In a circle · In a square · Outlined circle. |
| Hover effect |
List |
Lift the box |
Choices: None · Lift the box · Fill the icon. |
| Alignment |
List |
— |
Per device. Choices: Default (center) · Start · Center · End. |
Style
| Setting |
Type |
Default |
Details |
| Icon color |
Color |
— |
|
| Icon background |
Color |
— |
|
| Icon size |
Number |
— |
Per device. |
Info Box
A title and a list of points with icons over a background image, with a button.
Content
| Setting |
Type |
Default |
Details |
| Title |
Text |
Why choose us |
|
| Title HTML tag |
List |
H3 |
Choices: H2 · H3 · H4 · H5 · H6 · Paragraph. |
| Items |
Items |
— |
Each item: Text. |
| Item icon |
Icon |
bi:check2-circle |
|
| Background image |
Image |
— |
|
| Link |
Address |
— |
|
| Open in a new tab |
On / off |
Off |
|
| Button text |
Text |
— |
Empty: no button. |
| Button style |
List |
Light |
Choices: Primary · Secondary · Outline · Light · Text link. |
Style
| Setting |
Type |
Default |
Details |
| Overlay color |
Color |
— |
Darkens the background image so the text stays readable. |
| Icon color |
Color |
— |
|
An image beside a title, text and button, for promotions.
Content
| Setting |
Type |
Default |
Details |
| Image |
Image |
— |
|
| Image position |
List |
Start |
Choices: Start · End. |
| Title |
Text |
Promo box |
|
| Title HTML tag |
List |
H3 |
Choices: H2 · H3 · H4 · H5 · H6 · Paragraph. |
| Text |
Long text |
Tell visitors about an offer, a product or an e… |
|
| Button text |
Text |
Learn more |
Empty: no button. |
| Link |
Address |
— |
|
| Open in a new tab |
On / off |
Off |
|
| Button style |
List |
Primary |
Choices: Primary · Secondary · Outline · Light · Text link. |
| Image width |
Number |
— |
Empty: 50%. On mobile the image goes above the text. |
| Border around the box |
On / off |
On |
|
Sliding Box
An image with a title; more text slides into view on hover.
Content
| Setting |
Type |
Default |
Details |
| Image |
Image |
— |
|
| Title |
Text |
Sliding box |
|
| Text shown on hover |
Long text |
— |
|
| Link |
Address |
— |
|
| Open in a new tab |
On / off |
Off |
|
| Image shape |
List |
4:3 |
Choices: Original · Square · 4:3 · 16:9 · Portrait 3:4. |
Style
| Setting |
Type |
Default |
Details |
| Caption color |
Color |
— |
Empty uses the theme color. |
Story Box
An image in a frame with a title and text, linking to a page.
Content
| Setting |
Type |
Default |
Details |
| Image |
Image |
— |
|
| Image shape |
List |
Portrait |
Choices: Portrait · Landscape. |
| Title |
Text |
Our story |
|
| Title HTML tag |
List |
H3 |
Choices: H2 · H3 · H4 · H5 · H6 · Paragraph. |
| Text |
Long text |
How it started, what we believe in and where we… |
|
| Link |
Address |
— |
|
| Open in a new tab |
On / off |
Off |
|
Style
| Setting |
Type |
Default |
Details |
| Frame color |
Color |
— |
The offset frame behind the image. Empty uses the theme color. |
Trailer Box
An image with a slogan and a title, linking to a page.
Content
| Setting |
Type |
Default |
Details |
| Image |
Image |
— |
|
| Slogan |
Text |
New |
|
| Title |
Text |
Trailer box |
|
| Title HTML tag |
List |
H4 |
Choices: H2 · H3 · H4 · H5 · H6 · Paragraph. |
| Link |
Address |
— |
|
| Open in a new tab |
On / off |
Off |
|
| Style |
List |
Text over the image |
Choices: Text over the image · Text below the image. |
| Image shape |
List |
Portrait 3:4 |
Choices: Original · Square · 4:3 · 16:9 · Portrait 3:4. |
Style
| Setting |
Type |
Default |
Details |
| Overlay color |
Color |
— |
|