COPY-READY BLOCKS

Footers

Six responsive closing patterns. Preview desktop and mobile sizes, then copy the Footer source.

02 · SOCIAL

A compact legal and social split

Open full page

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

04 · BRAND

Centered identity with balanced navigation

Open full page

dowe
Footer variant:"solid" scheme:"muted" boxed:true py:{ xs:8 md:6 }
  center
    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:"/" variant:"solid" scheme:"muted" size:"sm"
            "Eleven"
          Button href:"/" variant:"solid" scheme:"muted" size:"sm"
            "Twelve"
          Button href:"/" variant:"solid" scheme:"muted" size:"sm"
            "Thirteen"
        Flex justify:"center"
          Brand href:"/" label:"WebbyFrames home"
            Flex align:"center" gap:2
              Icon name:"widget-5" style:"linear" fill:"onMuted" w:7 h:7
              Flex direction:"column" align:"center"
                Text size:"lg" weight:"black" color:"onMuted"
                  "WebbyFrames"
                Text size:"xs" color:"onMuted"
                  "for Figma"
        Flex justify:"end" gap:1
          IconButton icon:"play-circle" label:"YouTube" href:"https://youtube.com" variant:"solid" scheme:"muted"
          IconButton icon:"camera" label:"Instagram" href:"https://instagram.com" variant:"solid" scheme:"muted"
          IconButton icon:"link-circle" label:"LinkedIn" href:"https://linkedin.com" variant:"solid" scheme:"muted"
      Flex justify:"center" show:{ xs:false md:true }
        Text size:"xs" color:"onMuted"
          "CompanyName @ 202X. All rights reserved."
      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" style:"linear" fill:"onMuted" w:7 h:7
            Text size:"lg" weight:"black" color:"onMuted"
              "WebbyFrames"
        Text size:"xs" color:"onMuted"
          "CompanyName @ 202X. All rights reserved."
        Flex justify:"center" wrap:true gap:1
          Button href:"/" variant:"solid" scheme:"muted" size:"sm"
            "Eleven"
          Button href:"/" variant:"solid" scheme:"muted" size:"sm"
            "Twelve"
          Button href:"/" variant:"solid" scheme:"muted" size:"sm"
            "Thirteen"

05 · TWO ROW

Brand and navigation above the legal row

Open full page

dowe
Footer variant:"solid" scheme:"muted" boxed:true py:{ xs:8 md:7 }
  center
    Grid columns:1 gap:5 w:"full"
      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" style:"linear" fill:"onMuted" w:7 h:7
            Text size:"lg" weight:"black" color:"onMuted"
              "WebbyFrames"
        Flex wrap:true justify:"center" gap:1
          Button href:"/" variant:"solid" scheme:"muted" size:"sm"
            "Eleven"
          Button href:"/" variant:"solid" scheme:"muted" size:"sm"
            "Twelve"
          Button href:"/" variant:"solid" scheme:"muted" size:"sm"
            "Thirteen"
          Button href:"/" variant:"solid" scheme:"muted" size:"sm"
            "Fourteen"
          Button href:"/" variant:"solid" scheme:"muted" size:"sm"
            "Fifteen"
          Button href:"/" variant:"solid" scheme:"muted" size:"sm"
            "Sixteen"
      Divider
      Flex direction:{ xs:"column" md:"row" } align:"center" justify:"between" gap:4
        Text size:"xs" color:"onMuted"
          "CompanyName @ 202X. All rights reserved."
        Flex align:"center" gap:1
          IconButton icon:"play-circle" label:"YouTube" href:"https://youtube.com" variant:"solid" scheme:"muted"
          IconButton icon:"users-group-rounded" label:"Facebook" href:"https://facebook.com" variant:"solid" scheme:"muted"
          IconButton icon:"chat-square" label:"Twitter" href:"https://twitter.com" variant:"solid" scheme:"muted"
          IconButton icon:"camera" label:"Instagram" href:"https://instagram.com" variant:"solid" scheme:"muted"
          IconButton icon:"link-circle" label:"LinkedIn" href:"https://linkedin.com" variant:"solid" scheme:"muted"

06 · NEWSLETTER

A complete product directory and signup

Open full page

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