COPY-READY BLOCKS
Hero
Seven generic wireframe heroes built from real Dowe components, responsive layouts, and media placeholders.
01 ยท CENTERED + LAYERED MEDIA
Centered conversion copy above two neutral media placeholders
Open full page
const mediaFrames value:[
{ id:"primary" label:"Primary image placeholder" },
{ id:"secondary" label:"Secondary image placeholder" },
]
Section id:"centered-media-hero" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:12 }
Grid columns:1 gap:{ xs:8 md:12 }
Flex direction:"column" align:"center" gap:5
Title size:{ xs:"4xl" md:"6xl" } weight:"black"
"A dedicated team to grow your company"
Text size:"lg" color:"muted"
"A flexible headline, concise supporting copy, and two clear actions for a broad range of products and services."
Flex direction:{ xs:"column" sm:"row" } align:"center" justify:"center" gap:3
Button size:"lg" rounded:"full" iconEnd:"arrow-right"
"Get started"
Button variant:"outlined" size:"lg" rounded:"full"
"Talk to sales"
Grid columns:{ xs:1 md:2 } gap:{ xs:4 md:0 } align:"center"
each in:mediaFrames as:frame key:frame.id
Card variant:"soft" scheme:"muted" rounded:"xl" minH:{ xs:56 md:80 } p:8
Flex direction:"column" align:"center" justify:"center" gap:3 minH:{ xs:40 md:64 }
Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
Text size:"sm" color:"muted"
"{frame.label}"layout CenteredMediaHeroLayout
const navigationItems value:[
{ id:"home" label:"Home" },
{ id:"about" label:"About" },
{ id:"resources" label:"Resources" },
{ id:"contact" label:"Contact" },
]
signal openNavigation value:false
Scaffold
appBar
AppBar position:"fixed" boxed:true py:2
start
Brand href:"/blocks/hero-preview/centered-media" label:"Placeholder home"
Flex align:"center" gap:2
Icon name:"layers-minimalistic-bold-duotone" fill:"primary" w:7 h:7
Text weight:"black"
"PLACEHOLDER"
center
Flex align:"center" gap:1 show:{ xs:false md:true }
each in:navigationItems as:item key:item.id
Button variant:"ghost" size:"sm"
"{item.label}"
end
Flex align:"center" gap:2
Button href:"/blocks/hero-preview/lead-form" size:"sm" rounded:"full" show:{ xs:false md:true }
"Get started"
IconButton icon:"hamburger-menu" label:"Open navigation" variant:"ghost" show:{ xs:true md:false } onClick:{ set:openNavigation value:!openNavigation }
main
children
overlays
Drawer open:openNavigation position:"start" show:{ xs:true md:false }
body
Flex direction:"column" align:"stretch" gap:2 p:4
each in:navigationItems as:item key:item.id
Button variant:"ghost" w:"full"
"{item.label}"02 ยท VIDEO SPLIT
Focused copy paired with a portable Video placeholder
Open full page
Section id:"video-split-hero" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:12 }
Grid columns:{ xs:1 md:2 } gap:{ xs:8 md:14 } align:"center" minH:"vh-16"
Flex direction:"column" align:"start" justify:"center" gap:5
Title size:{ xs:"4xl" md:"6xl" } weight:"black"
"A dedicated team to grow your company"
Text size:"lg" color:"muted"
"Introduce the offer with a short message, paired calls to action, and a product story visitors can play when they are ready."
Flex direction:{ xs:"column" sm:"row" } align:"center" gap:3
Button size:"lg" rounded:"full" iconEnd:"arrow-right"
"Get started"
Button variant:"outlined" size:"lg" rounded:"full"
"Talk to sales"
Video:
src:"https://example.com/video.mp4"
aspect:"horizontal"
autoplay:false
variant:"soft"
scheme:"muted"
rounded:"xl"layout VideoSplitHeroLayout
const navigationItems value:[
{ id:"home" label:"Home" },
{ id:"about" label:"About" },
{ id:"resources" label:"Resources" },
{ id:"contact" label:"Contact" },
]
signal openNavigation value:false
Scaffold
appBar
AppBar position:"fixed" boxed:true py:2
start
Brand href:"/blocks/hero-preview/video-split" label:"Placeholder home"
Flex align:"center" gap:2
Icon name:"layers-minimalistic-bold-duotone" fill:"primary" w:7 h:7
Text weight:"black"
"PLACEHOLDER"
center
Flex align:"center" gap:1 show:{ xs:false md:true }
each in:navigationItems as:item key:item.id
Button variant:"ghost" size:"sm"
"{item.label}"
end
Flex align:"center" gap:2
Button href:"/blocks/hero-preview/lead-form" size:"sm" rounded:"full" show:{ xs:false md:true }
"Get started"
IconButton icon:"hamburger-menu" label:"Open navigation" variant:"ghost" show:{ xs:true md:false } onClick:{ set:openNavigation value:!openNavigation }
main
children
overlays
Drawer open:openNavigation position:"start" show:{ xs:true md:false }
body
Flex direction:"column" align:"stretch" gap:2 p:4
each in:navigationItems as:item key:item.id
Button variant:"ghost" w:"full"
"{item.label}"03 ยท LEAD FORM
Benefits and a compact form generated from reusable data
Open full page
const benefits value:[
{ id:"planning" label:"A clear plan tailored to your priorities." },
{ id:"delivery" label:"A delivery model that scales with your team." },
{ id:"support" label:"Practical support from first step to launch." },
]
const formFields value:[
{ id:"first-name" label:"First name" },
{ id:"last-name" label:"Last name" },
{ id:"email" label:"Email" },
{ id:"phone" label:"Phone" },
{ id:"company" label:"Company" },
{ id:"role" label:"Role" },
]
Section id:"lead-form-hero" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:12 }
Grid columns:{ xs:1 md:2 } gap:{ xs:8 md:14 } align:"center"
Flex direction:"column" align:"start" gap:5
Title size:{ xs:"4xl" md:"6xl" } weight:"black"
"A dedicated team to grow your company"
Text size:"lg" color:"muted"
"Set expectations before asking for contact details, then keep the form focused on information the team can act on."
Grid columns:1 gap:3
each in:benefits as:benefit key:benefit.id
Flex align:"center" gap:3
Icon name:"check-circle-bold" fill:"primary" w:6 h:6
Text weight:"bold"
"{benefit.label}"
Card variant:"soft" scheme:"muted" rounded:"xl" p:{ xs:5 md:8 }
Grid columns:{ xs:1 sm:2 } gap:4
each in:formFields as:field key:field.id
Grid columns:1 gap:2
Text size:"sm" weight:"bold"
"{field.label}"
Input placeholder:"Enter value" variant:"solid" scheme:"muted" w:"full"
Button size:"lg" rounded:"full" w:"full"
"Get started"layout LeadFormHeroLayout
const navigationItems value:[
{ id:"home" label:"Home" },
{ id:"about" label:"About" },
{ id:"resources" label:"Resources" },
{ id:"contact" label:"Contact" },
]
signal openNavigation value:false
Scaffold
appBar
AppBar position:"fixed" boxed:true py:2
start
Brand href:"/blocks/hero-preview/lead-form" label:"Placeholder home"
Flex align:"center" gap:2
Icon name:"layers-minimalistic-bold-duotone" fill:"primary" w:7 h:7
Text weight:"black"
"PLACEHOLDER"
center
Flex align:"center" gap:1 show:{ xs:false md:true }
each in:navigationItems as:item key:item.id
Button variant:"ghost" size:"sm"
"{item.label}"
end
Flex align:"center" gap:2
Button href:"/blocks/hero-preview/lead-form" size:"sm" rounded:"full" show:{ xs:false md:true }
"Get started"
IconButton icon:"hamburger-menu" label:"Open navigation" variant:"ghost" show:{ xs:true md:false } onClick:{ set:openNavigation value:!openNavigation }
main
children
overlays
Drawer open:openNavigation position:"start" show:{ xs:true md:false }
body
Flex direction:"column" align:"stretch" gap:2 p:4
each in:navigationItems as:item key:item.id
Button variant:"ghost" w:"full"
"{item.label}"04 ยท MEDIA CARD
A self-contained hero card with a neutral image placeholder
Open full page
Section id:"media-card-hero" bg:"background" color:"backgroundText" boxed:true py:{ xs:6 md:10 }
Card variant:"soft" scheme:"muted" rounded:"xl" minH:"vh-16" p:{ xs:7 md:14 }
Grid columns:1 gap:{ xs:10 md:14 } minH:"vh-16"
Flex direction:"column" align:"center" justify:"center" gap:5
Title size:{ xs:"4xl" md:"6xl" } weight:"black"
"A dedicated team to grow your company"
Text size:"lg" color:"muted"
"Place a focused message over a generous media surface while keeping the example independent from a specific brand or image."
Flex direction:{ xs:"column" sm:"row" } align:"center" justify:"center" gap:3
Button size:"lg" rounded:"full" iconEnd:"arrow-right"
"Get started"
Button variant:"outlined" size:"lg" rounded:"full"
"Talk to sales"
Flex direction:"column" align:"center" justify:"center" gap:3 minH:{ xs:44 md:64 }
Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
Text size:"sm" color:"muted"
"Image placeholder"layout MediaCardHeroLayout
const navigationItems value:[
{ id:"home" label:"Home" },
{ id:"about" label:"About" },
{ id:"resources" label:"Resources" },
{ id:"contact" label:"Contact" },
]
signal openNavigation value:false
Scaffold
appBar
AppBar position:"fixed" boxed:true py:2
start
Brand href:"/blocks/hero-preview/media-card" label:"Placeholder home"
Flex align:"center" gap:2
Icon name:"layers-minimalistic-bold-duotone" fill:"primary" w:7 h:7
Text weight:"black"
"PLACEHOLDER"
center
Flex align:"center" gap:1 show:{ xs:false md:true }
each in:navigationItems as:item key:item.id
Button variant:"ghost" size:"sm"
"{item.label}"
end
Flex align:"center" gap:2
Button href:"/blocks/hero-preview/lead-form" size:"sm" rounded:"full" show:{ xs:false md:true }
"Get started"
IconButton icon:"hamburger-menu" label:"Open navigation" variant:"ghost" show:{ xs:true md:false } onClick:{ set:openNavigation value:!openNavigation }
main
children
overlays
Drawer open:openNavigation position:"start" show:{ xs:true md:false }
body
Flex direction:"column" align:"stretch" gap:2 p:4
each in:navigationItems as:item key:item.id
Button variant:"ghost" w:"full"
"{item.label}"05 ยท SEARCH FIRST
A minimal hero centered around one searchable action
Open full page
signal searchQuery value:""
Section id:"search-hero" bg:"background" color:"backgroundText" boxed:true py:{ xs:10 md:16 }
Grid columns:{ xs:1 md:3 } align:"center" minH:"vh-32"
Box show:{ xs:false md:true }
Flex direction:"column" align:"center" justify:"center" gap:6
Title size:{ xs:"4xl" md:"6xl" } weight:"black"
"A dedicated team to grow your company"
Text size:"lg" color:"muted"
"Lead visitors directly to the content, service, or resource they already have in mind."
Input:
bind:searchQuery
label:"Search"
labelFloating:true
placeholder:"Search for..."
iconStart:"magnifier"
variant:"soft"
scheme:"muted"
rounded:"full"
w:"full"
Box show:{ xs:false md:true }layout SearchHeroLayout
const navigationItems value:[
{ id:"home" label:"Home" },
{ id:"about" label:"About" },
{ id:"resources" label:"Resources" },
{ id:"contact" label:"Contact" },
]
signal openNavigation value:false
Scaffold
appBar
AppBar position:"fixed" boxed:true py:2
start
Brand href:"/blocks/hero-preview/search" label:"Placeholder home"
Flex align:"center" gap:2
Icon name:"layers-minimalistic-bold-duotone" fill:"primary" w:7 h:7
Text weight:"black"
"PLACEHOLDER"
center
Flex align:"center" gap:1 show:{ xs:false md:true }
each in:navigationItems as:item key:item.id
Button variant:"ghost" size:"sm"
"{item.label}"
end
Flex align:"center" gap:2
Button href:"/blocks/hero-preview/lead-form" size:"sm" rounded:"full" show:{ xs:false md:true }
"Get started"
IconButton icon:"hamburger-menu" label:"Open navigation" variant:"ghost" show:{ xs:true md:false } onClick:{ set:openNavigation value:!openNavigation }
main
children
overlays
Drawer open:openNavigation position:"start" show:{ xs:true md:false }
body
Flex direction:"column" align:"stretch" gap:2 p:4
each in:navigationItems as:item key:item.id
Button variant:"ghost" w:"full"
"{item.label}"06 ยท FULL BLEED
A high-contrast canvas with content and media balanced side by side
Open full page
Section id:"full-bleed-hero" bg:"muted" color:"mutedText" boxed:true py:{ xs:10 md:14 }
Grid columns:{ xs:1 md:2 } gap:{ xs:10 md:14 } align:"center" minH:"vh-16"
Flex direction:"column" align:"start" justify:"center" gap:5
Title size:{ xs:"4xl" md:"6xl" } weight:"black"
"A dedicated team to grow your company"
Text size:"lg"
"Use a full-width color field to create contrast while the content and media placeholder remain simple and reusable."
Flex direction:{ xs:"column" sm:"row" } align:"center" gap:3
Button size:"lg" rounded:"full" iconEnd:"arrow-right"
"Get started"
Button variant:"outlined" scheme:"muted" size:"lg" rounded:"full"
"Talk to sales"
Flex direction:"column" align:"center" justify:"center" gap:3 minH:{ xs:48 md:72 }
Icon name:"gallery-bold-duotone" fill:"mutedText" w:16 h:16
Text size:"sm"
"Image placeholder"layout FullBleedHeroLayout
const navigationItems value:[
{ id:"home" label:"Home" },
{ id:"about" label:"About" },
{ id:"resources" label:"Resources" },
{ id:"contact" label:"Contact" },
]
signal openNavigation value:false
Scaffold
appBar
AppBar position:"fixed" boxed:true py:2
start
Brand href:"/blocks/hero-preview/full-bleed" label:"Placeholder home"
Flex align:"center" gap:2
Icon name:"layers-minimalistic-bold-duotone" fill:"primary" w:7 h:7
Text weight:"black"
"PLACEHOLDER"
center
Flex align:"center" gap:1 show:{ xs:false md:true }
each in:navigationItems as:item key:item.id
Button variant:"ghost" size:"sm"
"{item.label}"
end
Flex align:"center" gap:2
Button href:"/blocks/hero-preview/lead-form" size:"sm" rounded:"full" show:{ xs:false md:true }
"Get started"
IconButton icon:"hamburger-menu" label:"Open navigation" variant:"ghost" show:{ xs:true md:false } onClick:{ set:openNavigation value:!openNavigation }
main
children
overlays
Drawer open:openNavigation position:"start" show:{ xs:true md:false }
body
Flex direction:"column" align:"stretch" gap:2 p:4
each in:navigationItems as:item key:item.id
Button variant:"ghost" w:"full"
"{item.label}"07 ยท CAROUSEL
Several generic hero messages inside one native Carousel
Open full page
const slideContent value:{
strategy:{ eyebrow:"STRATEGY" title:"A dedicated team to grow your company" }
delivery:{ eyebrow:"DELIVERY" title:"A clear path from first idea to launch" }
support:{ eyebrow:"SUPPORT" title:"Practical expertise for every next step" }
}
Section id:"carousel-hero" bg:"background" color:"backgroundText" boxed:true py:{ xs:8 md:12 }
Carousel variant:"dots" scheme:"primary" indicatorType:"dot" gap:4 minH:"vh-16"
slide id:"strategy"
Flex direction:"column" align:"center" justify:"center" gap:5 minH:"vh-32"
Text size:"xs" weight:"bold" spacing:"widest" color:"primary"
"{slideContent.strategy.eyebrow}"
Title size:{ xs:"4xl" md:"6xl" } weight:"black"
"{slideContent.strategy.title}"
Text size:"lg" color:"muted"
"Use a portable Carousel when the hero needs several focused messages with native controls and indicators."
Flex direction:{ xs:"column" sm:"row" } align:"center" justify:"center" gap:3
Button size:"lg" rounded:"full" iconEnd:"arrow-right"
"Get started"
Button variant:"outlined" size:"lg" rounded:"full"
"Talk to sales"
slide id:"delivery"
Flex direction:"column" align:"center" justify:"center" gap:5 minH:"vh-32"
Text size:"xs" weight:"bold" spacing:"widest" color:"primary"
"{slideContent.delivery.eyebrow}"
Title size:{ xs:"4xl" md:"6xl" } weight:"black"
"{slideContent.delivery.title}"
Text size:"lg" color:"muted"
"Use a portable Carousel when the hero needs several focused messages with native controls and indicators."
Flex direction:{ xs:"column" sm:"row" } align:"center" justify:"center" gap:3
Button size:"lg" rounded:"full" iconEnd:"arrow-right"
"Get started"
Button variant:"outlined" size:"lg" rounded:"full"
"Talk to sales"
slide id:"support"
Flex direction:"column" align:"center" justify:"center" gap:5 minH:"vh-32"
Text size:"xs" weight:"bold" spacing:"widest" color:"primary"
"{slideContent.support.eyebrow}"
Title size:{ xs:"4xl" md:"6xl" } weight:"black"
"{slideContent.support.title}"
Text size:"lg" color:"muted"
"Use a portable Carousel when the hero needs several focused messages with native controls and indicators."
Flex direction:{ xs:"column" sm:"row" } align:"center" justify:"center" gap:3
Button size:"lg" rounded:"full" iconEnd:"arrow-right"
"Get started"
Button variant:"outlined" size:"lg" rounded:"full"
"Talk to sales"layout CarouselHeroLayout
const navigationItems value:[
{ id:"home" label:"Home" },
{ id:"about" label:"About" },
{ id:"resources" label:"Resources" },
{ id:"contact" label:"Contact" },
]
signal openNavigation value:false
Scaffold
appBar
AppBar position:"fixed" boxed:true py:2
start
Brand href:"/blocks/hero-preview/carousel" label:"Placeholder home"
Flex align:"center" gap:2
Icon name:"layers-minimalistic-bold-duotone" fill:"primary" w:7 h:7
Text weight:"black"
"PLACEHOLDER"
center
Flex align:"center" gap:1 show:{ xs:false md:true }
each in:navigationItems as:item key:item.id
Button variant:"ghost" size:"sm"
"{item.label}"
end
Flex align:"center" gap:2
Button href:"/blocks/hero-preview/lead-form" size:"sm" rounded:"full" show:{ xs:false md:true }
"Get started"
IconButton icon:"hamburger-menu" label:"Open navigation" variant:"ghost" show:{ xs:true md:false } onClick:{ set:openNavigation value:!openNavigation }
main
children
overlays
Drawer open:openNavigation position:"start" show:{ xs:true md:false }
body
Flex direction:"column" align:"stretch" gap:2 p:4
each in:navigationItems as:item key:item.id
Button variant:"ghost" w:"full"
"{item.label}"