Dowe

COPY-READY BLOCKS

Cards

Fourteen responsive card wireframes built from real Dowe components with their copy-ready source beside each preview.

01 · CENTERED CARD

Centered identity, headline, and short copy

Headline

Please add your content

here. Keep it short and

simple. And smile :)

Card variant:"solid" scheme:"background" rounded:"lg" w:64 minH:72 p:{ xs:6 md:10 }
  Flex direction:"column" align:"center" justify:"center" gap:4 minH:56
    Box bg:"softMuted" rounded:"full" w:14 h:14
    Title font:"system" size:"lg" weight:"medium"
      "Headline"
    Flex direction:"column" align:"center" gap:0
      Text font:"system" size:"sm" color:"muted"
        "Please add your content"
      Text font:"system" size:"sm" color:"muted"
        "here. Keep it short and"
      Text font:"system" size:"sm" color:"muted"
        "simple. And smile :)"

02 · MEDIA CARD

A leading visual paired with headline and subtitle

Headline

Subtitle

Please add your content here. Keep it short and simple. And smile :)

Card variant:"solid" scheme:"background" rounded:"lg" w:64 minH:72 p:{ xs:6 md:10 }
  Flex align:"center" justify:"center" minH:56
    Grid columns:1 gap:6 w:64
      Grid columns:2 gap:4 align:"center"
        Box bg:"softMuted" rounded:"full" w:14 h:14
        Grid columns:1 gap:1
          Title font:"system" size:"lg" weight:"medium"
            "Headline"
          Text font:"system" size:"sm" color:"muted"
            "Subtitle"
      Text font:"system" size:"sm" color:"muted" maxW:56
        "Please add your content here. Keep it short and simple. And smile :)"

03 · ACTION CARD

Editorial copy with one compact action

Headline

Please add your content here. Keep it short and simple. And smile :)

Card variant:"solid" scheme:"background" rounded:"lg" w:64 minH:72 p:{ xs:6 md:10 }
  Flex align:"center" justify:"center" minH:56
    Grid columns:1 gap:4 w:64
      Grid columns:1 gap:2
        Title font:"system" size:"lg" weight:"medium"
          "Headline"
        Text font:"system" size:"sm" color:"muted" maxW:48
          "Please add your content here. Keep it short and simple. And smile :)"
      Flex justify:"end" align:"end"
        Button size:"sm" rounded:"md" w:20
          "Button"

04 · FEATURE CARD

Three compact markers above centered copy

Headline

Please add your content here.

Keep it short and simple. And

smile :)

const markers value:[
  { id:"one" },
  { id:"two" },
  { id:"three" },
]
Card variant:"solid" scheme:"background" rounded:"lg" w:{ xs:72 md:80 } minH:72 p:{ xs:6 md:10 }
  Flex direction:"column" align:"center" justify:"center" gap:3 minH:56
    Flex align:"center" justify:"center" gap:8
      each in:markers as:marker key:marker.id
        Box bg:"softMuted" rounded:"md" w:10 h:10
    Title font:"system" size:"lg" weight:"medium"
      "Headline"
    Flex direction:"column" align:"center" gap:0
      Text font:"system" size:"sm" color:"muted"
        "Please add your content here."
      Text font:"system" size:"sm" color:"muted"
        "Keep it short and simple. And"
      Text font:"system" size:"sm" color:"muted"
        "smile :)"

05 · IMAGE CARD

A broad placeholder above a simple text block

Headline

Please add your content here. Keep it short and simple. And smile :)

Card variant:"solid" scheme:"background" rounded:"lg" w:{ xs:72 md:80 } minH:96 p:{ xs:6 md:10 }
  Flex align:"center" justify:"center" minH:80
    Grid columns:1 gap:4 w:"full" maxW:80
      Box bg:"softMuted" rounded:"lg" w:"full" h:40
      Grid columns:1 gap:1
        Title font:"system" size:"lg" weight:"medium"
          "Headline"
        Text font:"system" size:"sm" color:"muted" maxW:64
          "Please add your content here. Keep it short and simple. And smile :)"

06 · DUAL-ACTION CARD

A small label, headline, copy, and paired actions

Part I

Headline

Please add your content here. Keep it short and simple. And smile :)

const actions value:[
  { id:"secondary" label:"Button 2" variant:"outlined" },
  { id:"primary" label:"Button 1" variant:"solid" },
]
Card variant:"solid" scheme:"background" rounded:"lg" w:{ xs:72 md:80 } minH:72 p:{ xs:6 md:10 }
  Flex align:"center" justify:"center" minH:56
    Grid columns:1 gap:6 w:"full" maxW:80
      Grid columns:1 gap:1
        Text font:"system" size:"sm" color:"muted"
          "Part I"
        Title font:"system" size:"lg" weight:"medium"
          "Headline"
      Text font:"system" size:"sm" color:"muted" maxW:64
        "Please add your content here. Keep it short and simple. And smile :)"
      Flex justify:"end" align:"end" gap:4
        each in:actions as:action key:action.id
          Button variant:action.variant size:"sm" rounded:"full" w:20
            "{action.label}"

07 · TAGGED CARD

A compact summary with tags and a corner marker

Headline

Please add your content here. Keep it short and simple. And smile :)

const tags value:[
  { id:"tag-1" label:"Tag 1" },
  { id:"tag-2" label:"Tag 2" },
  { id:"tag-3" label:"Tag 3" },
]
Card variant:"solid" scheme:"background" rounded:"lg" w:64 minH:56 p:6
  Flex direction:"column" gap:4
    Flex justify:"between" align:"start"
      Title font:"system" size:"lg" weight:"medium"
        "Headline"
      Box bg:"softMuted" rounded:"full" w:8 h:8
    Text font:"system" size:"sm" color:"muted"
      "Please add your content here. Keep it short and simple. And smile :)"
    Flex wrap:true gap:2
      each in:tags as:tag key:tag.id
        Box border:1 borderColor:"muted" rounded:"full" px:3 py:1
          Text font:"system" size:"sm"
            "{tag.label}"

08 · IMAGE LABEL CARD

A visual panel with a floating status label

Label

Headline

Please add your content here. Keep it short and simple. And smile :)

Card variant:"solid" scheme:"background" rounded:"lg" w:64 p:0
  Grid columns:1 gap:0
    Box position:"relative" bg:"softMuted" w:"full" h:48
      Box position:"absolute" top:3 right:3
        Chip variant:"solid" scheme:"muted" size:"sm" rounded:"full"
          "Label"
    Grid columns:1 gap:2 p:6
      Title font:"system" size:"lg" weight:"medium"
        "Headline"
      Text font:"system" size:"sm" color:"muted"
        "Please add your content here. Keep it short and simple. And smile :)"

09 · MEDIA ACTION CARD

A media block with metadata and paired actions

Headline

Subhead

Title

Subtitle

Please add your content here. Keep it short and simple. And smile :)

const actions value:[
  { id:"secondary" label:"Button 2" variant:"outlined" },
  { id:"primary" label:"Button 1" variant:"solid" },
]
Card variant:"solid" scheme:"background" rounded:"lg" w:{ xs:72 md:80 } p:0
  Grid columns:1 gap:0
    Flex align:"center" justify:"between" gap:3 p:6
      Flex align:"center" gap:2
        Box bg:"softMuted" rounded:"full" w:8 h:8
        Grid columns:1 gap:0
          Title font:"system" size:"lg" weight:"medium"
            "Headline"
          Text font:"system" size:"sm" color:"muted"
            "Subhead"
      Box bg:"softMuted" rounded:"full" w:4 h:4
    Box bg:"softMuted" w:"full" h:48
    Grid columns:1 gap:4 p:6
      Grid columns:1 gap:1
        Title font:"system" size:"lg" weight:"medium"
          "Title"
        Text font:"system" size:"sm" color:"muted"
          "Subtitle"
      Text font:"system" size:"sm" color:"muted"
        "Please add your content here. Keep it short and simple. And smile :)"
      Flex justify:"end" gap:4
        each in:actions as:action key:action.id
          Button variant:action.variant size:"sm" rounded:"full" w:20
            "{action.label}"

10 · NUMBERED LIST CARD

Two compact points under a centered heading

Headline

Subhead

const rows value:[
  { id:"row-1" number:"1" copy:"Please add your content here. Keep it short and simple. And smile :)" },
  { id:"row-2" number:"2" copy:"Please add your content here. Keep it short and simple. And smile :)" },
]
Card variant:"solid" scheme:"background" rounded:"lg" w:{ xs:72 md:80 } p:6
  Grid columns:1 gap:4
    Flex direction:"column" align:"center" gap:0
      Title font:"system" size:"lg" weight:"medium"
        "Headline"
      Text font:"system" size:"sm" color:"muted"
        "Subhead"
    each in:rows as:row key:row.id
      Flex align:"center" gap:3
        Box bg:"softMuted" rounded:"full" w:8 h:8
          Flex align:"center" justify:"center" h:"full"
            Text font:"system" size:"sm"
              "{row.number}"
        Text font:"system" size:"sm" color:"muted"
          "{row.copy}"

11 · IMAGE TAGS ACTION CARD

A media card with metadata, tags, and action

Headline

Subhead

Please add your content here. Keep it short and simple. And smile :)

Title

Tag 4

const tags value:[
  { id:"tag-1" label:"Tag 1" },
  { id:"tag-2" label:"Tag 2" },
  { id:"tag-3" label:"Tag 3" },
  { id:"tag-4" label:"Tag 4" },
]
Card variant:"solid" scheme:"background" rounded:"lg" w:{ xs:72 md:80 } p:0
  Grid columns:1 gap:0
    Box bg:"softMuted" w:"full" h:48
    Grid columns:1 gap:4 p:6
      Grid columns:1 gap:1
        Title font:"system" size:"lg" weight:"medium"
          "Headline"
        Text font:"system" size:"sm" color:"muted"
          "Subhead"
      Text font:"system" size:"sm" color:"muted"
        "Please add your content here. Keep it short and simple. And smile :)"
      Divider scheme:"muted"
      Text font:"system" size:"sm"
        "Title"
      Flex wrap:true gap:2
        each in:tags as:tag key:tag.id
          Box border:1 borderColor:"muted" rounded:"full" px:3 py:1
            Text font:"system" size:"sm"
              "{tag.label}"
      Button size:"sm" rounded:"md" w:20
        "Button"

12 · MEDIA LEGEND CARD

A short intro, media placeholder, and legend

Headline

Please add your content here. Keep it short and simple. And smile :)

const legend value:[
  { id:"legend-1" label:"Text" },
  { id:"legend-2" label:"Text" },
  { id:"legend-3" label:"Text" },
]
Card variant:"solid" scheme:"background" rounded:"lg" w:{ xs:72 md:80 } p:0
  Grid columns:1 gap:0
    Grid columns:1 gap:1 p:6
      Title font:"system" size:"lg" weight:"medium"
        "Headline"
      Text font:"system" size:"sm" color:"muted"
        "Please add your content here. Keep it short and simple. And smile :)"
    Box bg:"softMuted" w:"full" h:48
    Flex justify:"center" gap:6 p:6
      each in:legend as:item key:item.id
        Flex align:"center" gap:2
          Box bg:"softMuted" rounded:"full" w:4 h:4
          Text font:"system" size:"sm" color:"muted"
            "{item.label}"

13 · TILE GRID CARD

A compact four-tile media grid

Headline

Please add your content here. Keep it short and simple. And smile :)

const tiles value:[
  { id:"tile-1" },
  { id:"tile-2" },
  { id:"tile-3" },
  { id:"tile-4" },
]
Card variant:"solid" scheme:"background" rounded:"lg" w:{ xs:72 md:80 } p:6
  Grid columns:1 gap:4
    Grid columns:1 gap:1
      Title font:"system" size:"lg" weight:"medium"
        "Headline"
      Text font:"system" size:"sm" color:"muted"
        "Please add your content here. Keep it short and simple. And smile :)"
    Grid columns:2 gap:4
      each in:tiles as:tile key:tile.id
        Box bg:"softMuted" rounded:"lg" w:"full" h:24

14 · AVATAR TAGS CARD

A compact identity card with tags

Headline

Please add your content here. Keep it short and simple. And smile :)

const tags value:[
  { id:"tag-1" label:"Tag 1" },
  { id:"tag-2" label:"Tag 2" },
  { id:"tag-3" label:"Tag 3" },
]
Card variant:"solid" scheme:"background" rounded:"lg" w:64 minH:56 p:6
  Flex direction:"column" gap:4
    Flex align:"center" gap:3
      Box bg:"softMuted" rounded:"full" w:8 h:8
      Title font:"system" size:"lg" weight:"medium"
        "Headline"
    Text font:"system" size:"sm" color:"muted"
      "Please add your content here. Keep it short and simple. And smile :)"
    Flex wrap:true gap:2
      each in:tags as:tag key:tag.id
        Box border:1 borderColor:"muted" rounded:"full" px:3 py:1
          Text font:"system" size:"sm"
            "{tag.label}"