Dowe

COPY-READY BLOCKS

Footers

Six responsive closing patterns built with top, center, and bottom regions plus breakpoint show rules. Preview desktop and mobile sizes, then copy the Footer source.

01 · NAVIGATION

Open full page

Footer scheme:"muted" boxed:true py:{ xs:7 md:5 }
  top
    Flex justify:"center" show:{ xs:true md:false }
      Text size:"xs" color:"mutedText"
        "CompanyName @ 202X. All rights reserved."
  center
    Flex direction:"row" align:"center" justify:"between" gap:8 w:"full" show:{ xs:false md:true }
      Text size:"xs" color:"mutedText"
        "CompanyName @ 202X. All rights reserved."
      Flex wrap:true justify:"center" gap:1
        Button href:"/" scheme:"muted" size:"sm"
          "Eleven"
        Button href:"/" scheme:"muted" size:"sm"
          "Twelve"
        Button href:"/" scheme:"muted" size:"sm"
          "Thirteen"
        Button href:"/" scheme:"muted" size:"sm"
          "Fourteen"
        Button href:"/" scheme:"muted" size:"sm"
          "Fifteen"
      Flex align:"center" justify:"center" gap:1
        IconButton icon:"play-circle" label:"YouTube" href:"https://youtube.com" scheme:"muted"
        IconButton icon:"users-group-rounded" label:"Facebook" href:"https://facebook.com" scheme:"muted"
        IconButton icon:"chat-square" label:"Twitter" href:"https://twitter.com" scheme:"muted"
        IconButton icon:"camera" label:"Instagram" href:"https://instagram.com" scheme:"muted"
        IconButton icon:"link-circle" label:"LinkedIn" href:"https://linkedin.com" scheme:"muted"
    Flex wrap:true justify:"center" gap:1 show:{ xs:true md:false }
      Button href:"/" scheme:"muted" size:"sm"
        "Eleven"
      Button href:"/" scheme:"muted" size:"sm"
        "Twelve"
      Button href:"/" scheme:"muted" size:"sm"
        "Thirteen"
  bottom
    Flex align:"center" justify:"center" gap:1 show:{ xs:true md:false }
      IconButton icon:"play-circle" label:"YouTube" href:"https://youtube.com" scheme:"muted"
      IconButton icon:"camera" label:"Instagram" href:"https://instagram.com" scheme:"muted"
      IconButton icon:"link-circle" label:"LinkedIn" href:"https://linkedin.com" scheme:"muted"

02 · SOCIAL

A compact legal and social split

Open full page

Footer scheme:"muted" boxed:true py:{ xs:6 md:3 }
  top
    Flex justify:"center" show:{ xs:true md:false }
      Text size:"xs" color:"mutedText"
        "CompanyName @ 202X. All rights reserved."
  center
    Flex direction:"row" align:"center" justify:"between" gap:8 w:"full" show:{ xs:false md:true }
      Text size:"xs" color:"mutedText"
        "CompanyName @ 202X. All rights reserved."
      Flex align:"center" justify:"center" gap:1
        IconButton icon:"play-circle" label:"YouTube" href:"https://youtube.com" scheme:"muted"
        IconButton icon:"users-group-rounded" label:"Facebook" href:"https://facebook.com" scheme:"muted"
        IconButton icon:"chat-square" label:"Twitter" href:"https://twitter.com" scheme:"muted"
        IconButton icon:"camera" label:"Instagram" href:"https://instagram.com" scheme:"muted"
        IconButton icon:"link-circle" label:"LinkedIn" href:"https://linkedin.com" scheme:"muted"
  bottom
    Flex align:"center" justify:"center" gap:1 show:{ xs:true md:false }
      IconButton icon:"play-circle" label:"YouTube" href:"https://youtube.com" scheme:"muted"
      IconButton icon:"users-group-rounded" label:"Facebook" href:"https://facebook.com" scheme:"muted"
      IconButton icon:"chat-square" label:"Twitter" href:"https://twitter.com" scheme:"muted"
      IconButton icon:"camera" label:"Instagram" href:"https://instagram.com" scheme:"muted"
      IconButton icon:"link-circle" label:"LinkedIn" href:"https://linkedin.com" scheme:"muted"

03 · LEGAL

One centered closing line

Open full page

Footer scheme:"muted" boxed:true py:4
  top
    Divider show:{ xs:true md:false }
  center
    Text size:"xs" color:"mutedText" show:{ xs:false md:true }
      "CompanyName @ 202X. All rights reserved."
    Text size:"xs" color:"mutedText" show:{ xs:true md:false }
      "CompanyName @ 202X. All rights reserved."
  bottom
    Divider show:{ xs:true md:false }

04 · BRAND

Centered identity with balanced navigation

Open full page

Footer scheme:"muted" boxed:true py:{ xs:8 md:6 }
  top
    Grid columns:1 gap:5 w:"full"
      Grid columns:3 align:"center" show:{ xs:false md:true }
        Flex justify:"start" wrap:true gap:1
          Button href:"/" scheme:"muted" size:"sm"
            "Eleven"
          Button href:"/" scheme:"muted" size:"sm"
            "Twelve"
          Button href:"/" scheme:"muted" size:"sm"
            "Thirteen"
        Flex justify:"center"
          Brand href:"/" label:"WebbyFrames home"
            Flex align:"center" gap:2
              Icon name:"widget-5" fill:"mutedText" w:7 h:7
              Flex direction:"column" align:"center"
                Text size:"lg" weight:"black" color:"mutedText"
                  "WebbyFrames"
                Text size:"xs" color:"mutedText"
                  "for Figma"
        Flex justify:"end" gap:1
          IconButton icon:"play-circle" label:"YouTube" href:"https://youtube.com" scheme:"muted"
          IconButton icon:"camera" label:"Instagram" href:"https://instagram.com" scheme:"muted"
          IconButton icon:"link-circle" label:"LinkedIn" href:"https://linkedin.com" scheme:"muted"
      Flex direction:"column" align:"center" gap:4 show:{ xs:true md:false }
        Brand href:"/" label:"WebbyFrames home"
          Flex align:"center" gap:2
            Icon name:"widget-5" fill:"mutedText" w:7 h:7
            Text size:"lg" weight:"black" color:"mutedText"
              "WebbyFrames"
        Flex justify:"center" wrap:true gap:1
          Button href:"/" scheme:"muted" size:"sm"
            "Eleven"
          Button href:"/" scheme:"muted" size:"sm"
            "Twelve"
          Button href:"/" scheme:"muted" size:"sm"
            "Thirteen"
  center
    Text size:"xs" color:"mutedText" show:{ xs:false md:true }
      "CompanyName @ 202X. All rights reserved."
  bottom
    Text size:"xs" color:"mutedText" show:{ xs:true md:false }
      "CompanyName @ 202X. All rights reserved."

05 · TWO ROW

Brand and navigation above the legal row

Open full page

Footer scheme:"muted" boxed:true py:{ xs:8 md:7 }
  top
    Grid columns:1 gap:5 w:"full" show:{ xs:false md:true }
      Flex direction:{ xs:"column" md:"row" } align:"center" justify:"between" gap:5
        Brand href:"/" label:"WebbyFrames home"
          Flex align:"center" gap:2
            Icon name:"widget-5" fill:"mutedText" w:7 h:7
            Text size:"lg" weight:"black" color:"mutedText"
              "WebbyFrames"
        Flex wrap:true justify:"center" gap:1
          Button href:"/" scheme:"muted" size:"sm"
            "Eleven"
          Button href:"/" scheme:"muted" size:"sm"
            "Twelve"
          Button href:"/" scheme:"muted" size:"sm"
            "Thirteen"
          Button href:"/" scheme:"muted" size:"sm"
            "Fourteen"
          Button href:"/" scheme:"muted" size:"sm"
            "Fifteen"
          Button href:"/" scheme:"muted" size:"sm"
            "Sixteen"
      Divider
      Flex direction:{ xs:"column" md:"row" } align:"center" justify:"between" gap:4
        Text size:"xs" color:"mutedText"
          "CompanyName @ 202X. All rights reserved."
        Flex align:"center" gap:1
          IconButton icon:"play-circle" label:"YouTube" href:"https://youtube.com" scheme:"muted"
          IconButton icon:"users-group-rounded" label:"Facebook" href:"https://facebook.com" scheme:"muted"
          IconButton icon:"chat-square" label:"Twitter" href:"https://twitter.com" scheme:"muted"
          IconButton icon:"camera" label:"Instagram" href:"https://instagram.com" scheme:"muted"
          IconButton icon:"link-circle" label:"LinkedIn" href:"https://linkedin.com" scheme:"muted"
  center
    Flex direction:"column" align:"center" gap:4 show:{ xs:true md:false }
      Brand href:"/" label:"WebbyFrames home"
        Flex align:"center" gap:2
          Icon name:"widget-5" fill:"mutedText" w:7 h:7
          Text size:"lg" weight:"black" color:"mutedText"
            "WebbyFrames"
      Flex wrap:true justify:"center" gap:1
        Button href:"/" scheme:"muted" size:"sm"
          "Eleven"
        Button href:"/" scheme:"muted" size:"sm"
          "Twelve"
        Button href:"/" scheme:"muted" size:"sm"
          "Thirteen"
  bottom
    Text size:"xs" color:"mutedText" show:{ xs:true md:false }
      "CompanyName @ 202X. All rights reserved."

06 · NEWSLETTER

A complete product directory and signup

Open full page

Footer scheme:"muted" boxed:true py:{ xs:7 md:6 }
  top
    Grid columns:1 gap:6 w:"full" show:{ xs:false md:true }
      Flex direction:{ xs:"column" md:"row" } align:"center" justify:"between" gap:5
        Brand href:"/" label:"WebbyFrames home"
          Flex align:"center" gap:2
            Icon name:"widget-5" fill:"mutedText" w:7 h:7
            Text size:"lg" weight:"black" color:"mutedText"
              "WebbyFrames"
        Grid columns:2 w:"full" gap:2
          Input placeholder:"Enter your email to get the latest news..." iconStart:"letter"
          Button
            "Subscribe"
      Divider
      Flex direction:{ xs:"column" md:"row" } justify:"between" gap:{ xs:7 md:8 } w:"full"
        Flex direction:"column" align:"start" gap:2
          Text weight:"bold" color:"mutedText"
            "Column One"
          Text size:"sm" color:"mutedText"
            "Twenty One"
          Text size:"sm" color:"mutedText"
            "Thirty Two"
          Text size:"sm" color:"mutedText"
            "Fourty Three"
          Text size:"sm" color:"mutedText"
            "Fifty Four"
        Flex direction:"column" align:"start" gap:2
          Text weight:"bold" color:"mutedText"
            "Column Two"
          Text size:"sm" color:"mutedText"
            "Sixty Five"
          Text size:"sm" color:"mutedText"
            "Seventy Six"
          Text size:"sm" color:"mutedText"
            "Eighty Seven"
          Text size:"sm" color:"mutedText"
            "Ninety Eight"
        Flex direction:"column" align:"start" gap:2
          Text weight:"bold" color:"mutedText"
            "Column Three"
          Text size:"sm" color:"mutedText"
            "One Two"
          Text size:"sm" color:"mutedText"
            "Three Four"
          Text size:"sm" color:"mutedText"
            "Five Six"
          Text size:"sm" color:"mutedText"
            "Seven Eight"
        Flex direction:"column" align:"start" gap:4
          Text weight:"bold" color:"mutedText"
            "Column Four"
          Flex wrap:true gap:2
            Button size:"sm" iconStart:"smartphone"
              "App Store"
            Button size:"sm" iconStart:"play"
              "Google Play"
          Text weight:"bold" color:"mutedText"
            "Join Us"
          Flex align:"center" gap:1
            IconButton icon:"play-circle" label:"YouTube" href:"https://youtube.com" scheme:"muted"
            IconButton icon:"users-group-rounded" label:"Facebook" href:"https://facebook.com" scheme:"muted"
            IconButton icon:"chat-square" label:"Twitter" href:"https://twitter.com" scheme:"muted"
            IconButton icon:"camera" label:"Instagram" href:"https://instagram.com" scheme:"muted"
            IconButton icon:"link-circle" label:"LinkedIn" href:"https://linkedin.com" scheme:"muted"
      Divider
      Flex direction:{ xs:"column" md:"row" } align:{ xs:"start" md:"center" } justify:"between" gap:4
        Text size:"xs" color:"mutedText"
          "CompanyName @ 202X. All rights reserved."
        Flex wrap:true gap:1
          Button href:"/" scheme:"muted" size:"sm"
            "Eleven"
          Button href:"/" scheme:"muted" size:"sm"
            "Twelve"
          Button href:"/" scheme:"muted" size:"sm"
            "Thirteen"
  center
    Grid columns:1 gap:4 w:"full" show:{ xs:true md:false }
      Brand href:"/" label:"WebbyFrames home"
        Flex align:"center" gap:2
          Icon name:"widget-5" fill:"mutedText" w:7 h:7
          Text size:"lg" weight:"black" color:"mutedText"
            "WebbyFrames"
      Grid columns:1 gap:2
        Input placeholder:"Enter your email to get the latest news..." iconStart:"letter"
        Button
          "Subscribe"
  bottom
    Text size:"xs" color:"mutedText" show:{ xs:true md:false }
      "CompanyName @ 202X. All rights reserved."