A library of 62 blocks

A block is a ready-made section of a page — a hero, a gallery, a pricing table. Each one lists exactly what it needs: a headline, a picture, a link, a choice of style. That list is what the editor turns into a simple form. Nothing about a block is hidden in its design, which is what lets HUGways edit blocks it has never seen before.

The catalogue

Every block on this site and the styles it comes in. Open one to see it live and what an editor can change.

  • App hero

    Opening block for a product page: app icon, name, a version/platform line, a short lede, and one call-to-action with a note under it.

  • Article

    A blog article: title, author, date, cover photo and the formatted text.

  • Block catalogue

    Every block on this site with the styles it comes in, each linking to its own page. Built from the blocks themselves, so a new block appears by itself.

  • Block editor

    Pick any block and see the real thing: the form an editor gets for it beside the block itself, in each style it comes in. A demonstration, not the CMS itself — nothing is stored.

  • Block label

    A slim annotation naming the block (and variant) shown below it. Used on showcase pages; leave it out of a real site.

  • Block spec

    What an editor can change on one block: its styles and every field. Used at the foot of each block's page.

  • Blog grid

    Article cards linking to blog posts: photo, category, title, excerpt and reading time.

  • Breadcrumb

    The trail from the home page to this one, built from the page's URL. On every page except home and 404 by default; switch it off per page with Show breadcrumb.

  • Call to action

    A closing band with a headline and one or two buttons, in one of three visual treatments.

    gradientimageoutline

  • Changelog

    Section heading over a list of releases, each a version number, an optional date and a short description of what changed.

  • Chapter navigation

    The end of a Showcase chapter: links to the previous and next chapter, and back to all of them. Finds its place from the page it is on.

  • Comparison table

    Compare your offer with two alternatives, row by row.

  • Contact cards

    A row of cards giving the direct ways to reach someone — email, phone, coverage area.

  • Contact details

    Cards for phone, email, address and opening hours (read from Site settings), plus an optional map.

  • Design gallery (popup)

    Pick a category to see sample designs. Each opens in a popup with a larger preview, a description and details.

  • Details strip

    An icon row of key facts under a hero — location, price, options, amenities — each its own column.

  • Facebook comments

    A heading and the Facebook comments box, so visitors can comment with their Facebook account.

  • Facebook like

    The Facebook Like button, with an optional Share button beside it. Loads Facebook's script, unless embeds are switched off in Site settings, which leaves a plain link.

  • Facebook page feed

    Shows a Facebook Page's latest posts, events or messages box, with a Like button. Loads Facebook's script, unless embeds are switched off in Site settings, which leaves a plain link to the page.

  • Facebook post

    Embeds one public Facebook post or video. Loads Facebook's script, unless embeds are switched off in Site settings, which leaves a plain link to the post.

  • FAQ

    Questions and answers as an accordion.

  • Feature grid

    A heading and a grid of cards, each with an image, some copy and an optional link.

  • Feature list (parallax)

    A heading followed by full-width rows, each with a background image, a card of copy on one side and a button. The image holds still as the page scrolls past it.

  • Gallery

    A heading and a set of images, in one of three visual treatments.

    gridmasonrylightbox-strip

  • Hero

    The opening band of a home page: a headline, an image and a call to action, in one of three visual treatments.

    centeredsplit-imagefull-bleed

  • Icon tile grid

    A bordered band with a heading over a row of icon tiles, each with its own title and short line.

  • Inquiry form

    An accessible inquiry form with validation, a success message and spam protection.

  • Live editor

    An interactive simulation of the HUGways editor: a form built from a block's options on one side and the live result on the other. A demonstration, not the CMS itself.

  • Location map

    A live OpenStreetMap embed centred on a point — pannable and zoomable, not a static image.

  • Logo strip

    A slim row of labelled icons, e.g. the technology the product is built on.

  • Marquee

    A slow, endless ticker of short phrases — logos-of-trust, values, a list of what you do. Pauses on hover.

    textpills

  • Not found (404)

    Full-page empty state: an oversized status code behind a headline, a line of copy, one button, and an optional row of destination tiles.

  • Note band

    A bordered note on its own — for a caveat, a disclaimer or an offer that runs out.

    plainhighlight

  • Page directory

    A list of the pages clients created in the CMS, newest first, each with its author and the date and time it was made. Fills itself from the site's pages — nothing to maintain.

  • Page header

    The opening band of a page: a headline, an optional standfirst, and an optional background image.

  • Picture row

    One or two captioned pictures, shown whole rather than cropped. For developer renders and campaign material.

  • Post list

    A list of blog posts: date, title, a short excerpt and a link to the post's page. Add a row here whenever a new post page is created.

  • Price list

    A list of extras or services with a short note and a price each.

  • Pricing table

    Side-by-side plans with a feature list, one of them optionally highlighted.

  • Product tour (tabs)

    Tabs that switch between screenshots, each with a title and a short explanation.

  • Project grid

    A section heading over a grid of project cards — place, status, price range and a link out — with optional search and filters.

  • Prose section

    A heading and a body of rich text. The workhorse block — most pages are mostly this.

  • Quote feature

    A single large pull-quote band — the organisation's philosophy or a founder's words — with an attribution line.

    accentsoft

  • Section navigation

    A slim navigation bar for one area's pages. Pins below the site header and stays visible while the page scrolls. Place it first in the page.

  • Service tabs

    A tabbed catalogue: a list of services on the left, a detail panel with image, checklist and tagline on the right.

  • Share buttons

    A call to share this page (or any address): a phone mock-up showing the page's link preview arriving in a chat, with the copy, buttons for Facebook, X, LinkedIn, WhatsApp, Telegram or email (plus copy-link and the phone's own share sheet) and a QR code that opens the page on a phone. The preview is built from the page's own title and share image, so it shows what a recipient will actually see. Plain links: nothing is loaded from the networks until a visitor clicks one.

    rowstacked

  • Showcase chapter

    Opens a chapter of the Showcase: its icon, title, summary and a suggestion to try. The chapter index and the chapter navigation are built from these.

  • Showcase chapter index

    A card for every chapter of the Showcase, each linking to its own page. Built from the site's pages, so a new chapter appears by itself.

  • Social links

    A row or a stacked list of links to the site's social profiles. Uses the links in Site settings unless this block lists its own.

    rowstacked

  • Social post embed

    Embeds one post from YouTube, Instagram, X or TikTok. The network is read from the address. Loads that network's script, unless embeds are switched off in Site settings, which leaves a plain link. YouTube uses its no-cookies player.

  • Spec list

    A list of items, each a name plus a few labelled facts about it. Stacks on a phone, pairs the facts side by side on a wider screen. Use instead of a table whenever the cells hold prose rather than short comparable values.

  • Split feature

    A picture beside some copy, with an optional checklist and button. Stack several, flipping the side, for a rhythm down the page.

  • Stats band

    A row of headline numbers that count up as they scroll into view, in one of three visual treatments.

    plaincardsgradient

  • Steps

    A numbered process — three steps across, or a vertical timeline.

    horizontaltimeline

  • Story timeline

    A vertical run of chapters — a short label, a heading and a paragraph each. For telling a story in order.

  • Team grid

    Portrait cards for the people behind the business.

  • Team profile

    Two-column profile: a work photo with an overlapping credential card and profile links, beside a portrait and biography.

  • Tech stack grid

    A card grid of groups, each an icon, a name and a set of pill-shaped tags, with a closing note.

  • Testimonials

    A heading and a set of client quotes, in one of three visual treatments.

    gridcarouselsingle-quote

  • Theme switcher

    A card per theme that re-skins the whole page live. A real site picks one theme in Site settings.

  • Trust strip

    A slim row of short reassurances — memberships, insurance, guarantees.

  • Ways to give

    A heading, a short note and a card for each way someone can send support — bank, e-wallet, remittance — plus a closing line.

See them working, by family

  • Heroes

    Three ways to open a page: centered, split-image and full-bleed — each from the same Hero block.

    Open Heroes

  • Layout & content

    Page headers, breadcrumbs, prose, split features, card grids and step-by-step processes.

    Open Layout

  • Media

    Three gallery styles — grid, masonry and a scrolling strip — plus the endless marquee.

    Open Media

  • Trust & conversion

    Testimonials, headline numbers, pricing, FAQs and calls to action, in every treatment.

    Open Conversion

Missing a block? Add one.

A new block takes a developer an afternoon, and the editor can use it straight away.

See how editing works