COPY-READY BLOCKS
Contact
Six responsive contact wireframes built from real Dowe forms, layouts, icons, and media placeholders.
01 · DETAILS + FORM
Contact details beside a structured message form
Open full page
signal form value:{ name:"" email:"" phone:"" company:"" message:"" }
const contactDetails value:[
{ id:"email" emailIcon:true phoneIcon:false addressIcon:false value:"contact@company.com" },
{ id:"phone" emailIcon:false phoneIcon:true addressIcon:false value:"(123) 456 – 789" },
{ id:"address" emailIcon:false phoneIcon:false addressIcon:true value:"794 Mcallister St · San Francisco, 94102" },
]
Section id:"contact-details-form" 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"
Flex direction:"column" align:{ xs:"center" md:"start" } gap:5
Grid columns:1 gap:2
Text size:"xs" weight:"bold" spacing:"widest" color:"muted"
"CONTACT US"
Title size:{ xs:"3xl" md:"5xl" } weight:"black"
"Get in touch today"
Text size:"md" color:"muted"
"Share a few details and our team will get back to you with a clear next step."
Grid columns:1 gap:3
each in:contactDetails as:detail key:detail.id
Flex align:"center" gap:3
Icon name:"letter" fill:"muted" w:5 h:5 show:detail.emailIcon
Icon name:"phone-calling" fill:"muted" w:5 h:5 show:detail.phoneIcon
Icon name:"map-point" fill:"muted" w:5 h:5 show:detail.addressIcon
Text color:"muted"
"{detail.value}"
Card variant:"soft" scheme:"muted" rounded:"xl" p:{ xs:5 md:8 }
Grid columns:1 gap:4
Grid columns:{ xs:1 sm:2 } gap:4
Input bind:form.name label:"Name" placeholder:"John Carter" variant:"solid" scheme:"muted" w:"full"
Input bind:form.email label:"Email" placeholder:"example@email.com" variant:"solid" scheme:"muted" w:"full"
Input bind:form.phone label:"Phone" placeholder:"(123) 456 – 789" variant:"solid" scheme:"muted" w:"full"
Input bind:form.company label:"Company" placeholder:"Company" variant:"solid" scheme:"muted" w:"full"
Textarea bind:form.message label:"Message" placeholder:"Please type your message here..." rows:5 variant:"solid" scheme:"muted" w:"full"
Button rounded:"full" w:{ xs:"full" sm:48 }
"Send message"02 · INFO + MEDIA
A neutral media placeholder paired with contact information
Open full page
const contactDetails value:[
{ id:"email" emailIcon:true phoneIcon:false addressIcon:false value:"contact@company.com" },
{ id:"phone" emailIcon:false phoneIcon:true addressIcon:false value:"(123) 456 – 789" },
{ id:"address" emailIcon:false phoneIcon:false addressIcon:true value:"794 Mcallister St · San Francisco, 94102" },
]
Section id:"contact-info-media" 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"
Box rounded:"xl" p:8 minH:{ xs:64 md:96 }
Flex direction:"column" align:"center" justify:"center" gap:3 minH:{ xs:48 md:80 }
Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
Text size:"sm" color:"muted"
"Image placeholder"
Card rounded:"xl" p:{ xs:6 md:9 }
Grid columns:1 gap:5
Grid columns:1 gap:2
Title size:{ xs:"3xl" md:"4xl" } weight:"black"
"Contact us"
Text color:"muted"
"Prototypes may also be exempted from some requirements that will apply to the final product."
Grid columns:1 gap:3
each in:contactDetails as:detail key:detail.id
Flex align:"center" gap:3
Icon name:"letter" fill:"muted" w:5 h:5 show:detail.emailIcon
Icon name:"phone-calling" fill:"muted" w:5 h:5 show:detail.phoneIcon
Icon name:"map-point" fill:"muted" w:5 h:5 show:detail.addressIcon
Text color:"muted"
"{detail.value}"04 · SPLIT PANEL
An elevated contact surface against a split background
Open full page
signal form value:{ name:"" email:"" phone:"" company:"" message:"" }
Section id:"contact-split-panel" bg:"background" color:"backgroundText" p:0 minH:"vh-0"
Grid columns:{ xs:1 md:2 } gap:0 minH:"vh-0"
Box p:{ xs:5 md:10 }
Card variant:"soft" scheme:"muted" rounded:"xl" p:{ xs:6 md:10 }
Grid columns:1 gap:5
Grid columns:1 gap:2
Title size:{ xs:"3xl" md:"5xl" } weight:"black"
"Get in touch today"
Text color:"muted"
"Tell us what you are building and we will help you find the clearest path forward."
Grid columns:{ xs:1 sm:2 } gap:4
Input bind:form.name label:"Name" placeholder:"John Carter" variant:"solid" scheme:"muted" w:"full"
Input bind:form.email label:"Email" placeholder:"example@email.com" variant:"solid" scheme:"muted" w:"full"
Input bind:form.phone label:"Phone" placeholder:"(123) 456 – 789" variant:"solid" scheme:"muted" w:"full"
Input bind:form.company label:"Company" placeholder:"Company" variant:"solid" scheme:"muted" w:"full"
Textarea bind:form.message label:"Leave us a message" placeholder:"Please type your message here..." rows:5 variant:"solid" scheme:"muted" w:"full"
Button rounded:"full" w:{ xs:"full" sm:48 }
"Send message"
Box bg:"softMuted" p:8 minH:{ xs:64 md:"vh-0" }
Flex direction:"column" align:"center" justify:"center" gap:3 minH:{ xs:48 md:"vh-0" }
Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
Text size:"sm" color:"muted"
"Image placeholder"05 · SPLIT PANEL SECONDARY
A second routed version of the repeated split reference
Open full page
signal form value:{ name:"" email:"" phone:"" company:"" message:"" }
Section id:"contact-split-panel-duplicate" bg:"background" color:"backgroundText" p:0 minH:"vh-0"
Grid columns:{ xs:1 md:2 } gap:0 minH:"vh-0"
Box p:{ xs:5 md:10 }
Card variant:"soft" scheme:"muted" rounded:"xl" p:{ xs:6 md:10 }
Grid columns:1 gap:5
Grid columns:1 gap:2
Title size:{ xs:"3xl" md:"5xl" } weight:"black"
"Get in touch today"
Text color:"muted"
"Tell us what you are building and we will help you find the clearest path forward."
Grid columns:{ xs:1 sm:2 } gap:4
Input bind:form.name label:"Name" placeholder:"John Carter" variant:"solid" scheme:"muted" w:"full"
Input bind:form.email label:"Email" placeholder:"example@email.com" variant:"solid" scheme:"muted" w:"full"
Input bind:form.phone label:"Phone" placeholder:"(123) 456 – 789" variant:"solid" scheme:"muted" w:"full"
Input bind:form.company label:"Company" placeholder:"Company" variant:"solid" scheme:"muted" w:"full"
Textarea bind:form.message label:"Leave us a message" placeholder:"Please type your message here..." rows:5 variant:"solid" scheme:"muted" w:"full"
Button rounded:"full" w:{ xs:"full" sm:48 }
"Send message"
Box bg:"softMuted" p:8 minH:{ xs:64 md:"vh-0" }
Flex direction:"column" align:"center" justify:"center" gap:3 minH:{ xs:48 md:"vh-0" }
Icon name:"gallery-bold-duotone" fill:"muted" w:16 h:16
Text size:"sm" color:"muted"
"Image placeholder"
06 · FORM + SOCIALS + MEDIA
A centered introduction above contact, social, and media surfaces
Open full page