Footer strip: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/footer-strip.html Core Patterns (https://patternpaste.com/patterns/) Footer (https://patternpaste.com/patterns/footer/) Catalogue access Standard # Footer strip A footer that is one line under a heavy rule: a 4px currentColor bar runs the full width of the viewport, and beneath it the site name, five links and the copyright share a single short band on your base colour. On a phone the line wraps into a stack and the rule is still the mark. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The name. Replace "Hallmere" with your site name. - The five links. They ship without URLs. - The copyright. Change the year and the name. - The weight of the rule. The 4px top border is the signature. - The band's height. Top and bottom padding are spacing preset 40. The signature moment ## A heavy rule over one dense line The whole footer is one line under a rule thick enough to read as a mark, not a divider. Every other footer in the catalogue is tall; this one is density contrast, a page's worth of content above and then a single packed line at the end, with the 4px bar as the structural mark that says the page has stopped. Both survive colourlessness: the line is proportion and the bar is currentColor, so the rule is always the same colour as the type beside it, whatever that type is in your theme. Nothing in it depends on a palette. Theme handoff ## What comes from where ### From your theme - Your typeface. - Your colours. - Your spacing scale. - Your link and button styling. ### Set by this pattern - The rule. - Full bleed with its own measure. - The one line. - The name. - The link boxes. - The copyright. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview The smallest footer that still closes a page. A 4px rule in currentColor runs the full width of the viewport, and under it one short band on your base colour holds three things on a single line: the site name at the left, a run of five links in the middle, the copyright at the right. There are no columns, no headings and no second row. It is for the site whose footer has nothing to say beyond "this is who we are, here is where else to go". ### The signature moment: a heavy rule over one dense line The whole footer is one line under a rule thick enough to read as a mark, not a divider. Every other footer in the catalogue is tall; this one is density contrast, a page's worth of content above and then a single packed line at the end, with the 4px bar as the structural mark that says the page has stopped. Both survive colourlessness: the line is proportion and the bar is currentColor, so the rule is always the same colour as the type beside it, whatever that type is in your theme. Nothing in it depends on a palette. Make it yoursVariations and the edits to make first ### What to change first - The name. Replace "Hallmere" with your site name. It is uppercase and tracked, so a name much longer than about twelve characters will start to crowd the links at 1024px; shorten it or drop the tracking. - The five links. They ship without URLs. The labels are deliberately eight characters or more; keep them there, because a very short label makes a small tap target on a phone. Add a sixth and the run wraps inside its own row before the row itself wraps. - The copyright. Change the year and the name. It is the one line a visitor reads, so it keeps a 15px floor. - The weight of the rule. The 4px top border is the signature. Step it to 3px in a theme with a fine typeface if it feels heavy; do not take it to 1px, because then this is a hairline footer and there is a better one in the catalogue for that. - The band's height. Top and bottom padding are spacing preset 40. Step them to 50 if your theme's scale is tight and the line feels pinched under the rule. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Your typeface. The name, the links and the copyright state no family. The name is set in whatever your theme gives an h2, at a footer size rather than a heading size. - Your colours. The ground asks for base and everything on it asks for contrast, the two slugs every stock block theme defines. If a theme defines neither, the strip falls back to white and black. - Your spacing scale. The band's top and bottom padding are spacing preset 40, and the vertical gap between rows when the line wraps is preset 20, so a theme with a generous scale gets a slightly taller strip without you editing anything. - Your link and button styling. Every link is a core button with its background cleared and its text set back to the band's, so it takes your theme's button element styles, including hover and focus, while reading as plain text. ### What it decides for itself - The rule. The outer group carries a 4px solid top border in currentColor. The weight is the point: at 1px it is a hairline like every other footer's, and at 4px it is the mark the section is built around. It spans the viewport because the group is full width. - Full bleed with its own measure. The band spans the viewport and holds its content to 1240px, so the line reads against the page edge and not against a column. - The one line. The inner group is a wrapping flex row with its three children spread to the edges and centred vertically, so the name, the link run and the copyright share one baseline band at desktop widths. - The name. Uppercase, weight 700, a small positive tracking of 0.04em and a line-height of 1, sized clamp(1.125rem, 1.4vw, 1.375rem). It is a wordmark at label scale, not a display heading. - The link boxes. Each link carries a full rem of padding above and below and none at either side, so it is comfortably tappable on a phone while sitting flush with its neighbours. Buttons carry no typography attribute, because one does not stay valid across editor versions. - The copyright. A plain paragraph at clamp(0.9375rem, 1vw, 1rem) with its margins cleared, so the flex row decides where it sits. Technical notesBlock mechanics, responsive behaviour and constraints ### Styled look: Navy and sky The bottom that matches Nav bar in Navy and sky: the same one line on a #13294b navy ground in #ffffff type, under a 4px #bcd7f2 sky rule instead of a currentColor one, set in Avenir Next falling to Helvetica and Arial, with a heating engineer's links and Gas Safe number as the sample copy. ### Notes - Core blocks only: group, heading, buttons, button, paragraph. No separator: the rule is the outer group's own border. No plugin, nothing to keep updated. - Every colour is a fallback chain ending on a colour WordPress itself guarantees, so nothing in the strip can resolve to nothing. The rule is currentColor and needs no chain. - No promise axis is declared: colour, type and motion are all the default, so this pattern inherits your palette and your typeface and carries no CSS of its own. - This footer has no columns, so core's stacking below 782px never fires. What happens instead is the flex row wrapping: as the width closes, the copyright drops to a second row first, then the link run wraps inside itself, and at 390px the strip is a left-aligned stack of name, links and copyright with a preset-20 gap between rows. The heavy rule is the mark that survives the wrap: it is the same bar at every width, and it is what still makes the stack read as a footer rather than as a list. - The centred variation (strip-centred) keeps both chains and the rule and changes only the composition: the three children stack and centre at every width, the link run centred as a row that wraps from the middle. Questions ## Footer strip: common questions Does Footer strip need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Footer strip match my theme? Choose by variation. One line and Centred strip take your theme’s palette; Navy and sky brings its own colours. How many variations does Footer strip have? 3: One line, Navy and sky and Centred strip. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Footer strip free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. Which WordPress version does it need? Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. 5.3KB of core-block markup, 5 blocks (button, buttons, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Call to action Callout response clock A call-out section where the day is drawn to scale: a label, heading and a call button over one framed bar of three segments whose widths are their hours, 8am to 6pm, 6pm to midnight and midnight to 8am. Each segment carries its hours, how long we take to arrive at display size and the call-out fee under a hairline, and one line under the bar gives the hourly rate after that. On a phone the bar stacks into three rows that still name their hours. States no colour and no font of its own. (https://patternpaste.com/pattern/callout-response-clock.html)Contact Contact cover ledger A full-bleed contact cover: a display heading in the top left, and a ruled ledger of address, hours, phone and email in the far lower-right corner, label left and value right between hairline rules, with the photograph running between them. A heavy veil of your theme's contrast colour keeps every line legible whatever photograph you choose. The ledger drops under the heading on a phone. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/contact-cover-ledger.html)Header Nav bar A header bar on one line: a heavy, tightly tracked wordmark at the left edge against tiny widely tracked links at the right, one solid action beside them, and a hairline under the whole bar. The links are your WordPress menu, a core navigation block that folds to a menu button on a phone so the bar stays one line. Compact by construction, so it reads as the top of a page and never as a hero. States no colour and no font of its own. (https://patternpaste.com/pattern/nav-bar.html) #### Before you paste Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Footer Access Subscription Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, group, heading, paragraph Presets color 5, spacing 2, font-size 2 WordPress 7.0+ Continue exploring ## Next in Footer Explore all 9 Footer patterns (https://patternpaste.com/patterns/footer/) Shot in Twenty Twenty-Five Footer No plugin needed ### Footer sign-off A footer that opens with an ask instead of a sitemap: a tracked eyebrow, a display-size question across a wide left measure and one filled button beneath it, set against a narrow, dense stack of six links bottom-aligned so the last link lands on the button's line. Footer Preview pattern (https://patternpaste.com/pattern/footer-signoff.html) Shot in Twenty Twenty-Five Footer No plugin needed ### Site footer An inverted footer where the site name, set at display size, is the structure: three dense link columns hang to its line instead of sitting under a floating logo. Footer Preview pattern (https://patternpaste.com/pattern/site-footer.html) Shot in Twenty Twenty-Five Footer No plugin needed ### Footer booking fold A local-business footer drawn as an open fold: a broad field puts a display sign-off above the address, grouped hours and contact links; a narrower booking corner begins lower, enclosed by a heavy top edge and two sides. Footer Preview pattern (https://patternpaste.com/pattern/footer-booking-fold.html)