| type |
title |
subtitle |
content |
actions |
image |
image_alt |
media_position |
media_width |
align |
padding_top |
padding_bottom |
background_color |
hero_section |
This Is A Big Hero Headline |
Optional hero section subtitle |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl ligula, cursus id molestie vel. |
| label |
url |
style |
Try Free |
/pricing |
primary |
|
| label |
url |
style |
Learn More |
/features |
secondary |
|
|
images/classic/hero.png |
Hero section placeholder image |
left |
fifty |
left |
large |
large |
primary |
|
| type |
title |
subtitle |
align |
grid_items |
grid_cols |
grid_gap_horiz |
grid_gap_vert |
grid_section |
Image Grid |
Grid Section Example |
center |
| image |
image_alt |
image_align |
images/logo-1.svg |
Contentful logo |
center |
|
| image |
image_alt |
image_align |
images/logo-2.svg |
Netlify logo |
center |
|
| image |
image_alt |
image_align |
images/logo-3.svg |
Gatsby logo |
center |
|
| image |
image_alt |
image_align |
images/logo-4.svg |
Sanity logo |
center |
|
| image |
image_alt |
image_align |
images/logo-5.svg |
DatoCMS logo |
center |
|
| image |
image_alt |
image_align |
images/logo-6.svg |
Next.js logo |
center |
|
| image |
image_alt |
image_align |
images/logo-7.svg |
Gridsome logo |
center |
|
| image |
image_alt |
image_align |
images/logo-8.svg |
Git logo |
center |
|
|
four |
medium |
medium |
|
| type |
title |
subtitle |
features |
feature_padding_vert |
align |
background_color |
features_section |
Features Section |
Features Section Example |
| title |
subtitle |
content |
actions |
image |
image_alt |
media_position |
media_width |
The Big Title For the Feature |
In fermentum odio et tortor laoreet, sed interdum augue ornare. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl ligula, cursus id molestie vel, maximus aliquet risus. Vivamus in nibh fringilla, fringilla. |
| label |
url |
style |
has_icon |
icon |
icon_position |
Learn More |
/style-guide |
primary |
true |
arrow-right |
right |
|
|
images/classic/feature-1.png |
Feature 1 placeholder image |
right |
fifty |
|
| title |
content |
actions |
image |
image_alt |
media_position |
media_width |
The Big Title For the Feature |
Ac felis donec et odio pellentesque. Sagittis vitae et leo duis ut diam quam nulla. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. |
| label |
url |
style |
has_icon |
icon |
icon_position |
Learn More |
/style-guide |
primary |
true |
arrow-right |
right |
|
|
images/classic/feature-2.png |
Feature 2 placeholder image |
left |
fifty |
|
| title |
subtitle |
content |
actions |
image |
image_alt |
media_position |
media_width |
The Big Title For the Feature |
Sed sed commodo turpis, eget rutrum dui. |
Ac felis donec et odio pellentesque. Sagittis vitae et leo duis ut diam quam nulla. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. |
| label |
url |
style |
has_icon |
icon |
icon_position |
Learn More |
/style-guide |
primary |
true |
arrow-right |
right |
|
|
images/classic/feature-3.png |
Feature 3 placeholder image |
right |
fifty |
|
|
large |
center |
secondary |
|
| type |
features |
feature_padding_vert |
background_color |
features_section |
| title |
subtitle |
image |
image_alt |
media_position |
media_width |
“Stackbit is fast! Themes are always up to date. It’s easy to use across the organization, and collaboration is easy.” |
Brandon Guidelines, Sr. Design Manager at Company |
images/brandon-guidelines.png |
Brandon Guidelines |
right |
thirty-three |
|
|
small |
primary |
|
| type |
title |
subtitle |
grid_items |
grid_cols |
grid_gap_horiz |
grid_gap_vert |
enable_cards |
align |
background_color |
grid_section |
Cards Grid Section |
Grid Section Example |
| title |
title_align |
content |
content_align |
actions |
actions_align |
image |
image_alt |
image_position |
image_align |
image_has_padding |
Section Item 1 |
left |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl ligula, cursus id molestie vel, maximus aliquet risus. Vivamus in nibh fringilla, fringilla. |
left |
| label |
url |
style |
has_icon |
icon |
icon_position |
Learn More |
/style-guide |
link |
true |
arrow-right |
center |
|
|
left |
images/classic/icon-1.svg |
Section item 1 icon |
top |
left |
true |
|
| title |
title_align |
content |
content_align |
actions |
actions_align |
image |
image_alt |
image_position |
image_align |
image_has_padding |
Section Item 2 |
left |
Ac felis donec et odio pellentesque. Sagittis vitae et leo duis ut diam quam nulla. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. |
left |
| label |
url |
style |
has_icon |
icon |
icon_position |
Learn More |
/style-guide |
link |
true |
arrow-right |
center |
|
|
left |
images/classic/icon-2.svg |
Section item 2 icon |
top |
left |
true |
|
| title |
title_align |
content |
content_align |
actions |
actions_align |
image |
image_alt |
image_position |
image_align |
image_has_padding |
Section Item 3 |
left |
Ac felis donec et odio pellentesque. Sagittis vitae et leo duis ut diam quam nulla. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. |
left |
| label |
url |
style |
has_icon |
icon |
icon_position |
Learn More |
/style-guide |
link |
true |
arrow-right |
center |
|
|
left |
images/classic/icon-3.svg |
Section item 3 icon |
top |
left |
true |
|
|
three |
medium |
small |
true |
center |
none |
|
| type |
title |
subtitle |
grid_items |
grid_cols |
grid_gap_horiz |
grid_gap_vert |
align |
background_color |
grid_section |
Reviews Section |
Grid Section Example |
| content |
image |
image_alt |
image_position |
image_width |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl ligula, cursus id molestie vel, maximus aliquet risus.
**Hanson Deck,** *App Developer, Studio* |
images/hanson-deck.png |
Hanson Deck |
left |
twenty-five |
|
| content |
image |
image_alt |
image_position |
image_width |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl ligula, cursus id molestie vel, maximus aliquet risus.
**Miles Tone,** *CEO, Studio* |
images/miles-tone.png |
Miles Tone |
left |
twenty-five |
|
| content |
image |
image_alt |
image_position |
image_width |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl ligula, cursus id molestie vel, maximus aliquet risus.
**Eleanor Carr,** *CTO, Studio* |
images/eleanor-carr.png |
Eleanor Carr |
left |
twenty-five |
|
| content |
image |
image_alt |
image_position |
image_width |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl ligula, cursus id molestie vel, maximus aliquet risus.
**Gordon Norman,** *Web Designer, Studio* |
images/gordon-norman.png |
Gordon Norman |
left |
twenty-five |
|
|
two |
medium |
large |
center |
secondary |
|
| type |
title |
content |
actions |
actions_position |
actions_width |
align |
padding_top |
padding_bottom |
background_color |
cta_section |
This is Call To Action Section In DIY Theme! |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl ligula, cursus id molestie vel, maximus aliquet risus. Vivamus in nibh fringilla, fringilla. |
| label |
url |
style |
Learn More |
/features |
secondary |
|
|
right |
fourty |
left |
large |
large |
primary |
|
| type |
title |
subtitle |
actions |
grid_items |
grid_cols |
align |
background_color |
grid_section |
Team Section |
Grid Section Example |
| label |
url |
style |
Join the team |
/style-guide |
primary |
|
|
| title |
subtitle |
title_align |
image |
image_position |
Gustav Purpleson |
Co-Founder & CEO |
center |
images/gustav-purpleson.jpg |
top |
|
| title |
subtitle |
title_align |
image |
image_position |
Dianne Ameter |
Software Engineer |
center |
images/dianne-ameter.jpg |
top |
|
| title |
subtitle |
title_align |
image |
image_position |
Hugh Saturation |
Developer Advocate |
center |
images/hugh-saturation.jpg |
top |
|
| title |
subtitle |
title_align |
image |
image_position |
Hilary Ouse |
Operations Manager |
center |
images/hilary-ouse.jpg |
top |
|
|
four |
center |
secondary |
|
| type |
title |
subtitle |
actions |
blog_feed_cols |
enable_cards |
show_recent |
recent_count |
show_image |
show_date |
show_categories |
show_author |
show_excerpt |
align |
padding_top |
padding_bottom |
has_border |
background_color |
blog_feed_section |
What's New |
Blog Feed Section Example |
| label |
url |
style |
View All |
/blog |
primary |
|
|
three |
true |
true |
3 |
true |
true |
true |
true |
false |
center |
medium |
medium |
false |
none |
|
| type |
title |
content |
actions |
actions_position |
align |
padding_top |
padding_bottom |
background_color |
cta_section |
This is Call To Action Section In DIY Theme! |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl ligula, cursus id molestie vel, maximus aliquet risus. Vivamus in nibh fringilla, fringilla. |
| label |
url |
style |
Button |
/pricing |
primary |
|
|
bottom |
center |
large |
large |
secondary |
|