COPY-READY BLOCKS
Call to action
Seven responsive wireframe CTAs built from real Dowe components and neutral media placeholders.
01 · SPLIT ACTIONS
A compact headline balanced by two calls to action
Open full page
const actions value:[
{ id:"start" label:"Get started" variant:"solid" },
{ id:"sales" label:"Talk to sales" variant:"outlined" },
]
Section id:"split-actions-cta" bg:"background" color:"backgroundText" boxed:true p:{ xs:6 md:10 }
Grid columns:{ xs:1 md:2 } gap:{ xs:6 md:12 } align:"center" minH:{ xs:72 md:56 }
Flex direction:"column" align:{ xs:"center" md:"start" } justify:"center" gap:3
Title size:{ xs:"3xl" md:"4xl" } weight:"black"
"Create your account today and get started for free!"
Grid columns:1 gap:3 w:"full" show:{ xs:true sm:false }
each in:actions as:action key:action.id
Button variant:action.variant size:"lg" rounded:"full" w:"full"
"{action.label}"
Flex align:"center" justify:{ xs:"center" md:"end" } gap:3 show:{ xs:false sm:true }
each in:actions as:action key:action.id
Button variant:action.variant size:"lg" rounded:"full"
"{action.label}"02 · CENTERED ACTIONS
A centered conversion message with paired actions
Open full page
const actions value:[
{ id:"start" label:"Get started" variant:"solid" },
{ id:"sales" label:"Talk to sales" variant:"outlined" },
]
Section id:"centered-actions-cta" bg:"background" color:"backgroundText" boxed:true p:{ xs:6 md:12 }
Flex direction:"column" align:"center" justify:"center" gap:6 minH:{ xs:80 md:"vh-0" }
Flex direction:"column" align:"center" gap:3 maxW:96
Title size:{ xs:"3xl" md:"5xl" } weight:"black"
"Create your account today and get started for free!"
Grid columns:1 gap:3 w:"full" show:{ xs:true sm:false }
each in:actions as:action key:action.id
Button variant:action.variant size:"lg" rounded:"full" w:"full"
"{action.label}"
Flex align:"center" justify:"center" gap:3 show:{ xs:false sm:true }
each in:actions as:action key:action.id
Button variant:action.variant size:"lg" rounded:"full"
"{action.label}"03 · MEDIA PANEL
A soft split panel pairing conversion copy with media
Open full page
const actions value:[
{ id:"start" label:"Get started" variant:"solid" },
{ id:"sales" label:"Talk to sales" variant:"outlined" },
]
Section id:"media-panel-cta" bg:"softMuted" color:"softMutedText" boxed:true p:{ xs:6 md:12 }
Grid columns:{ xs:1 md:2 } gap:{ xs:8 md:14 } align:"center" minH:"vh-0"
Flex direction:"column" align:{ xs:"center" md:"start" } justify:"center" gap:5
Grid columns:1 gap:3
Title size:{ xs:"3xl" md:"5xl" } weight:"black"
"Create your account today and get started for free!"
Text size:"lg" color:"muted"
"Bring your next idea to life with a focused workspace built for clear plans and steady progress."
Grid columns:1 gap:3 w:"full" show:{ xs:true sm:false }
each in:actions as:action key:action.id
Button variant:action.variant size:"lg" rounded:"full" w:"full"
"{action.label}"
Flex align:"center" gap:3 show:{ xs:false sm:true }
each in:actions as:action key:action.id
Button variant:action.variant size:"lg" rounded:"full"
"{action.label}"
Box bg:"surface" rounded:"xl" p:8 minH:{ xs:72 md:96 }
Flex direction:"column" align:"center" justify:"center" gap:3 minH:{ xs:56 md:80 }
Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
Text size:"sm" color:"muted"
"Image placeholder"04 · APP DOWNLOAD
Two platform cards with distinct store actions
Open full page
Section id:"app-download-cta" bg:"background" color:"backgroundText" boxed:true p:{ xs:6 md:12 }
Grid columns:{ xs:1 md:2 } gap:{ xs:5 md:8 } align:"stretch" minH:"vh-0"
Card scheme:"primary" rounded:"xl" p:{ xs:7 md:10 } minH:{ xs:80 md:96 }
Flex direction:"column" align:{ xs:"center" md:"start" } justify:"center" gap:5 minH:{ xs:64 md:80 }
Title size:{ xs:"3xl" md:"4xl" } weight:"black"
"Download our app for iOS and iPadOS"
Text size:"lg" color:"primaryText"
"Stay connected to your work from every Apple device, wherever the day takes you."
Button scheme:"muted" size:"lg" rounded:"full" iconStart:"smartphone"
"Download for iOS"
Card variant:"outlined" scheme:"muted" rounded:"xl" p:{ xs:7 md:10 } minH:{ xs:80 md:96 }
Flex direction:"column" align:{ xs:"center" md:"start" } justify:"center" gap:5 minH:{ xs:64 md:80 }
Title size:{ xs:"3xl" md:"4xl" } weight:"black"
"Download our app for Android"
Text size:"lg" color:"muted"
"Take the same focused workflow with you across phones, tablets, and compatible devices."
Button size:"lg" rounded:"full" iconStart:"play"
"Download for Android"05 · MEDIA LEFT
A compact media placeholder leading into focused copy
Open full page
const actions value:[
{ id:"start" label:"Get started" variant:"solid" },
{ id:"sales" label:"Talk to sales" variant:"outlined" },
]
Section id:"media-left-cta" bg:"background" color:"backgroundText" boxed:true p:{ xs:6 md:12 }
Grid columns:{ xs:1 md:2 } gap:{ xs:8 md:14 } align:"center" minH:"vh-0"
Box bg:"softMuted" rounded:"xl" p:8 minH:{ xs:64 md:80 }
Flex direction:"column" align:"center" justify:"center" gap:3 minH:{ xs:48 md:64 }
Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
Text size:"sm" color:"muted"
"Image placeholder"
Flex direction:"column" align:{ xs:"center" md:"start" } justify:"center" gap:5
Grid columns:1 gap:3
Title size:{ xs:"3xl" md:"5xl" } weight:"black"
"Create your account today and get started for free!"
Text size:"lg" color:"muted"
"Start with a clear plan, invite your team, and turn the next milestone into visible progress."
Grid columns:1 gap:3 w:"full" show:{ xs:true sm:false }
each in:actions as:action key:action.id
Button variant:action.variant size:"lg" rounded:"full" w:"full"
"{action.label}"
Flex align:"center" gap:3 show:{ xs:false sm:true }
each in:actions as:action key:action.id
Button variant:action.variant size:"lg" rounded:"full"
"{action.label}"06 · BENEFIT LIST
A benefit checklist beside a large media placeholder
Open full page
const benefits value:[
{ id:"interaction" label:"Interaction design" },
{ id:"management" label:"Finding and managing" },
{ id:"architecture" label:"Information architecture" },
{ id:"delivery" label:"Flexible delivery" },
{ id:"testing" label:"Usability testing" },
]
const actions value:[
{ id:"start" label:"Get started" variant:"solid" },
{ id:"sales" label:"Talk to sales" variant:"outlined" },
]
Section id:"benefit-list-cta" bg:"softMuted" color:"softMutedText" boxed:true p:{ xs:6 md:12 }
Grid columns:{ xs:1 md:2 } gap:{ xs:8 md:14 } align:"center" minH:"vh-0"
Flex direction:"column" align:{ xs:"center" md:"start" } justify:"center" gap:6
Title size:{ xs:"3xl" md:"5xl" } weight:"black"
"Create your account today and get started for free!"
Grid columns:{ xs:1 sm:2 } gap:3 w:"full"
each in:benefits as:benefit key:benefit.id
Flex align:"center" gap:3
Icon name:"check-circle-bold" fill:"muted" w:5 h:5
Text color:"muted"
"{benefit.label}"
Grid columns:1 gap:3 w:"full" show:{ xs:true sm:false }
each in:actions as:action key:action.id
Button variant:action.variant size:"lg" rounded:"full" w:"full"
"{action.label}"
Flex align:"center" gap:3 show:{ xs:false sm:true }
each in:actions as:action key:action.id
Button variant:action.variant size:"lg" rounded:"full"
"{action.label}"
Box bg:"surface" rounded:"xl" p:8 minH:{ xs:72 md:96 }
Flex direction:"column" align:"center" justify:"center" gap:3 minH:{ xs:56 md:80 }
Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
Text size:"sm" color:"muted"
"Image placeholder"07 · INSET PANEL
A centered CTA framed by a soft inset surface
Open full page
const actions value:[
{ id:"start" label:"Get started" variant:"solid" },
{ id:"sales" label:"Talk to sales" variant:"outlined" },
]
Section id:"inset-panel-cta" bg:"background" color:"backgroundText" boxed:true p:{ xs:5 md:12 }
Card variant:"soft" scheme:"muted" rounded:"xl" p:{ xs:7 md:14 } minH:{ xs:80 md:96 }
Flex direction:"column" align:"center" justify:"center" gap:6 minH:{ xs:64 md:72 }
Flex direction:"column" align:"center" gap:3 maxW:96
Title size:{ xs:"3xl" md:"6xl" } weight:"black"
"Create your account today and get started for free!"
Grid columns:1 gap:3 w:"full" show:{ xs:true sm:false }
each in:actions as:action key:action.id
Button variant:action.variant size:"lg" rounded:"full" w:"full"
"{action.label}"
Flex align:"center" justify:"center" gap:3 show:{ xs:false sm:true }
each in:actions as:action key:action.id
Button variant:action.variant size:"lg" rounded:"full"
"{action.label}"