Every component, measured at three widths.
152 components
152 components
Social Proof
Client plates
Client proof as a hierarchy: a heading over one sentence, the first few supplied clients on large stone plates cut apart by slanted gutters with their marks shown as supplied (sized by area from the plate width, so every mark fills its plate with the same weight), then the rest as a roll call of names in running type split by the same slant. Plates always fill their row and the roll wraps as text, so no count leaves a stray cell. No logos, no section.
Conversion
Comparison ledger
A comparison section for two to four options set as a ruled ledger: one real table with each option's name, price and line heading its column on a short ink rule, and the compared points as hairline rows read across every option. Cells say Included, Not included, the business's own words or a visible 'Not stated'. No option is emphasised unless the owner sets one together with its supplied note. Phones keep the table.
Conversion
Contact switchboard
A contact section organised around why the visitor is getting in touch: one framed board of reasons — urgent problem, booking, quote, billing — each with a line on what it covers, what happens next, and the channel that suits it as a full-strength action (call, email or the site's own request page), with the urgent route set in reverse. Hours, towns served and the office address close the board in a tinted strip. Every channel and fact only if supplied.
Navigation
Contents masthead header
A two-tier editorial masthead: the name centred in a display serif between an outlined call pill and one solid action, with every page on a ruled serif contents line beneath. Narrower, it keeps both tiers — the pages or a labelled Menu share the contents line with the action — and Menu opens a large serif index beside a contact card. Computed switch widths; a small script adds Escape and outside-click close.
Content & Layout
Coverage board
A business's supplied service areas or markets as one ruled board on a deep surface: opened by a title panel (heading, sentence, source note) that is the board's left column on desktop, filled by compact hairline-ruled cells, one area each, and closed by the action as a solid amber tile that fills the last row. Lists only what is supplied, in order; no map, chips, numbers or claims.
Navigation
Expanding glass header
A dark glass capsule floating over the hero that grows into its own mega panel: the open section fills with the accent, its chevron rolls, and the panel height glides between sections. Panels hold columns of graded-icon rows, an optional lead row and up to three photo cards. Tucks away on scroll down, returns on scroll up; below the computed width it becomes a sheet of accordions inside the same capsule.
Conversion
Fill-in inquiry
A typographic lead form written as a letter: the fields are blanks inside a sentence set large in a display serif, one clause per line with each rule running to the same right margin, the real label printed under it and the visitor's answers in the accent italic; a message becomes ruled writing lines, and a field without lead words is led by its label like a ruled form sheet. One send row under the letter, and the direct line written as a postscript sentence at the foot beside any supplied details. Without a verified endpoint it renders an honest preview mode — full form, disabled send, a readable note.
Navigation
Flanked masthead header
A centred masthead header: the business name in the middle with the area served beneath it, the number and hours on the left and the booking button on the right as an equal pair, and the pages as one centred row under a double rule. Below 1024px the name stays centred beside a square menu control and the number and booking action become a full-width split call | book strip. Everything renders only when supplied; no script.
Services
Footnoted services
A services section written as one sentence: a centred display-serif line of prose in which each service is an italic accent link with a reference numeral, then matching footnotes under a hairline — name, short description and a text action each — linked to the sentence on hover and focus. Optional closing line with a call button and a text action. One to eight services; no cards, icons or photos.
Content & Layout
Method sequence
A process section drawn as a descending ledger: every step is a full-width ruled row, and a short ink segment carrying the step — a hanging numeral, its title, detail and any note — advances one position per row, so the method descends diagonally from the heading to one closing action and a call link. Steps only as supplied, in order; numerals are positions, never timings. No cards, dots, icons or photographs. Designed for 3–6 steps.
Navigation
Ruled fascia header
A shopfront-fascia header: one full-bleed band of ruled compartments — a solid nameplate from the left edge, equal page cells, a number cell and a filled action block to the right edge. It measures its own content so the cells never wrap, keeps the number in the band at every width, and moves the pages into a native disclosure sheet below that width.
Services
Service wayfinder
Onward navigation for the foot of a service page: a filled 'next' sign with the next service set large and a solid arrow, a quieter 'previous' sign, and a route line with every service as a stop and this page marked 'You are here'. Takes the business's whole service list; renders nothing without two services and a known current page.
Social Proof
Team register
A team as a ruled register, not a headshot grid: a lead column (heading, intro, one action) beside the people, grouped under the business's own labels. Each person is one aligned row — a small 4:5 plate (the portrait printed onto the group's tone, or a monogram from the name), the name in a display serif with the credentials as their own accent line, the role and focus, and the person's own profile, call and email links. Everything renders only when supplied.
Navigation
Title block footer
A light footer drawn as one ruled sheet: a heavy frame, hairline rules and a field for every fact. The name in a display serif, the number in the one inverted field (the main call path) with the action under it, Email, Visit and Hours in equal fields, link groups as full-width index rows with one link per track, and every row divided on one six-track spine. Every fact only when supplied; empty fields and rows are never drawn.
Navigation
Closing statement footer
A dark footer that closes the page: a large statement beside the ways to reach the business (action, number, email), a quiet layer with the brand, address (only if supplied), pages and services, a legal line, and the business name as a wide sign-off sized to fit. Without a statement the top is one slim contact row.
Social Proof
Credential ledger
Verified authority as a ruled record: a split header (heading; one sentence and a provenance note) over a ledger of the business's own licences and registrations — a sentence-case label over the identifier in large tabular figures, with issuer, a short line and a source (a registry link only when one is supplied). Value-less credentials become statement rows. No seals, badges or icons.
Conversion
Entry offer pair
A pricing section for one main engagement and the smaller first step that leads into it: the first step unboxed on the left, the engagement as a panel at twice its width, joined by a drawn connector carrying how one leads into the other. The main offer's price sits beside a numbered rail of how it runs. Prices, terms, steps and the connector render only when supplied.
Metrics
Evidence mosaic
Mixed proof in one hairline-ruled mosaic: an attributed result figure leads, and a quote, unnumbered results, the business's own facts (each with its basis) and case-study links keep their own shapes and tints, laid out from the mix. Every figure names its client or project; fewer than two items renders nothing. No icons, photos or cards.
Conversion
Guided inquiry
A two-stage lead form with a composed support column: the form asks what the visitor needs first (choice cards built on native radios, each with a one-line hint) and how to reach them second, in numbered fieldsets; the direct line sits beside the heading in large type, and a light support column ruled to the form's own lines carries a response promise, a confidence line, a dotted 'what happens next' list and an email alternative. Without a verified endpoint the form renders an honest preview mode; without a form the support column becomes a full-width band.
Content & Layout
Markets served
Where a business works, set as one typeset statement: a split header (heading; sentence and an optional action) over a heavy rule, then the supplied markets, regions or areas running across the full width as display type sized by count. Lists only what is supplied, in order; no map, chips, rows, numbers or claims. A summary presentation for a mention on another page.
Content & Layout
Region index
A business's locations as a typographic register: place names in condensed display type on ruled rows, optionally grouped under region labels in their own column, each row a native disclosure that opens that place's address, phone, email, hours, note and actions. An optional primary location sits above on a deep panel. Everything renders only as supplied; no map, pins or photos.
Conversion
Contact methods band
A closing contact section with no form: a dark accent band with a heading over a ruled row of the supplied ways to reach the business — phone and email as large call and mail links, then address, hours and areas.
Content & Layout
Reasons ledger
Why choose us, set as a ledger rather than cards: heading and intro on the left, the verified reasons down the right as a numbered list with large serif numerals and hairlines. No icons, photos or figures.
Heroes
Call strip hero
A dark, text-forward hero for a service people ring: the service as a very large headline, one sentence, then a full-width ruled strip where the verified number is the largest thing on the line, beside the main action and the areas served.
Content & Layout
Rule title banner
An inner-page title band that needs no photo: an eyebrow against a hairline, a large serif page title and an optional short introduction beside it, resting on a heavy accent rule.
Navigation
Call bar header
A dark, in-flow header for a business people phone: name or logo, the site's pages, and the verified number as a real call link beside one action. Below 960px the number stays in the bar as a call button and the pages open in a panel under it.
Services
Service index
A type-led services section: heading beside a short intro, a call button and a text action (each only if given), then each service as a full-width ruled row set in large type — name, one line, arrow — with the whole row the link. No cards, icons or photos.
Social Proof
Featured quote reviews
Reviews that need only the words and the name: the first set large as a lead quote with its attribution under it, the rest in a ruled grid of plain quotes. Each review can link to where it was published and carry its date; a supplied aggregate rating sits beside the heading. No photos, no cards, no carousel. Nothing is filled in; with no reviews it renders nothing.
Navigation
Business details footer
A dark site footer for a business people call or visit: name and a line about it opposite the phone number set large and an optional action, then columns for services, pages, contact details and towns served — each only if given — over a copyright, legal and social bar.
Conversion
Area contact section
The end of a local-service page: copy and a ruled list of contact details (phone, email, address, hours — each only if given) with a call button and a main action, beside the towns served on a dark panel and, when a real embed is supplied, a map.
Content & Layout
Checked reasons section
A "why choose us" section laid out as a checklist sheet: the heading across the top with the paragraph and action beside it, then the reasons as a ruled two-column grid of ticked boxes, each a short reason and a line explaining it. Photo, action and a ruled row of figures are optional; no reason, figure or claim has a default.
Services
Service card grid
A light, scannable services grid: a short header, then plain cards with an icon tile, the service name, a line of description, an optional label and an optional link, and an optional action below. Icons are the caller's; without one a card shows its number.
Heroes
Hairline statement hero
A quiet typographic hero for a firm that sells judgement: a large statement on a warm neutral ground, a short paragraph, an outlined button and a text link, and a hairline-ruled row of facts the firm states about itself. No photo needed; one can sit in a narrow frame beside the statement.
Heroes
Pebble frame hero
A warm, light split hero: a friendly headline, a welcome, two rounded actions and plain highlights beside a photo in a soft pebble-shaped frame — or, with no photo, a drawn scene of a low sun over rolling hills. Licence, accreditation, founding year and rating render only when supplied.
Heroes
Service area hero
A light, call-first hero for a business that serves a place: the service as the headline, the area beneath it, a click-to-call button beside the main action, and — only when supplied — rating, licence and hours. A panel beside it sets the number large and lists the towns covered.
Conversion
Map contact form
A contact section: centred GET IN TOUCH eyebrow between rules and a big heading, then an embedded map beside a light grey rounded form panel (name, email, phone, freight type, load, message) with a full-width orange Submit Request pill.
Content & Layout
Contact info cards
Three white, hairline-bordered rounded cards — address, phone and email, opening hours — each with a pale orange icon tile, an Outfit title and one or two lines; map, tel: and mailto: links turn orange on hover. Cards rise in on scroll.
Conversion
Shipment quote form
A freight quote request in one rounded, hairline-bordered card: portrait photo left, a real form right in two fieldsets — Personal Info and Shipment Info (freight type, cities, incoterms, weight and dimensions) — pill inputs with orange icons and an orange Request A Quote pill.
Social Proof
Quote card slider
A testimonial slider on a pale band with drawn ripples: heading left, two round orange arrows right, then white speech-bubble quote cards with stars, an orange quote badge and the person beneath. Each click moves one card and wraps round.
Media & Effects
Project photo marquee
A latest-projects band over a faint chevron texture: centred eyebrow between rules and a two-line heading, then a full-bleed strip of tall rounded photo cards with white label bars, drifting left in a 65s loop and pausing on hover or focus.
Content & Layout
Experience intro cards
An About-page intro: orange eyebrow left, big navy heading right with an orange Know More pill and a call-us phone link, over three cards — a photo with a frosted label chip, a navy stat card whose number counts up, and a light card with a line of copy over a corner photo.
Heroes
Breadcrumb page banner
A 550px full-bleed photo banner for inner pages: a container ship under a navy wash, a big white Outfit title low on the left and a "Home » Page" breadcrumb with orange separators. Leaves the top clear for an overlay header.
Navigation
Contact bar overlay header
A two-tier header laid over a page banner: a 76px contact bar (phone, email and address with orange icons, "Follow Us:" and four social circles), then a rounded dark translucent nav bar inset from the edges with white links, four dropdowns and an orange "Free Quote!" pill that greys on hover. Menu button and navy card below 1200px; contact bar hidden on a phone.
Navigation
Newsletter panel footer
A navy footer: "Subscribe Our Newsletter" beside a pill email field with an orange Subscribe button, then a rounded, slightly lighter panel with logo, blurb and social circles and Quick Links / Our Services / Contact Us columns (» bullets, orange-and-white heading rules), and a centred copyright line. A band variant swaps the panel for a hairline and an orange copyright band.
Content & Layout
Logistics blog cards
Three post cards over a faint drawn herringbone on light grey: centred eyebrow and heading, then photo, tag, title and an author row with a pink arrow tile. Each card is one link; the photo zooms and the tile turns orange on hover.
Conversion
Stacked pricing plans
A white pricing section: eyebrow, heading, paragraph and two chevron selling points on the left; three horizontal plan cards stacked on the right with price, a "Get Started" pill and a checked feature list. The middle plan is a dark navy card.
Conversion
Dark contact panel
A navy contact section: a tall photo beside a translucent panel with eyebrow, big heading and a real contact form (name, phone, email, message, send), over three info cards for address, phone and opening hours.
Services
Alternating service rows
A services section on a pale band: rows pairing a photo with a navy panel, swapping sides each row, inner top corners chamfered and a round orange arrow link in a white collar on the seam. Panels carry a pill, uppercase title, huge faded number and two checks.
Social Proof
Numbered testimonial switcher
A light testimonial section: centred eyebrow and heading, a rounded portrait left and a big quote, name and orange role right, switched by "01 ——— 02 03 04" number tabs. The portrait cross-fades and the quote slides in. Phone lists them all.
Services
Badge image intro
An intro section: a large rounded photo with a round bite from its top-right edge holding a spinning orange text badge, beside an uppercase heading, a paragraph and two pale cards with an icon, title and checklist.
Content & Layout
Scroll progress timeline
A history timeline: centred heading, then a rail down the middle with numbered markers and milestone cards alternating sides. An orange fill runs down the rail as you scroll and each marker it passes turns orange.
Content & Layout
Trust reasons split
A tall port photo in a rounded frame beside an eyebrow, big heading, paragraph, a two-by-two list of "»" reasons, an orange pill and a call-us block with a phone link. Photo and text slide in from opposite sides.
Conversion
Badge image CTA band
A full-width photo band with a round notch in its top edge holding a slowly spinning orange text badge, and an orange card in dark ink overlapping its foot: heading, hairline, checks and a navy pill that turns white on hover.
Social Proof
Cargo logo marquee
Six original partner wordmarks drifting slowly across a band, over a navy-tinted port photo or on light grey under a heading set between hairlines. Pure CSS; pauses on hover, focus or its toggle; static under reduced motion.
Social Proof
Team reveal cards
A team section: eyebrow, big heading and pill over a hairline, then four pale cards with a portrait on a tinted, top-chamfered panel, a name and an orange role. Hover or focus slides round social links up over the portrait.
Services
Checklist feature grid
A why-choose-us section on a pale band: eyebrow and big heading over a 2×2 grid of white cards (round orange icon, title, hairline, two check-marked points), with two stacked photos in a column on the right.
Content & Layout
About stats intro
An about-company section: eyebrow and three-line heading over a hairline, then a tall ticket-shaped photo beside two stat cards (years; avatars, reviews and a score with stars filled to it), a check-marked subheading, two paragraphs, a two-column checklist and a pill.
Social Proof
Team hover cards
Centred eyebrow and heading over three portrait cards with a white name strip and a navy share icon; on hover the photo zooms to 1.05 and the icon gives way to a pill of social links. The same reveal runs on keyboard focus.
Heroes
Tag title banner
An inner-page banner as a split: breadcrumb and a heavy uppercase title with a stamped tag on a navy field, and an optional full-height photo panel meeting it at an accent seam (a closing strip below 700px). Rises in on load and clears a fixed pill header.
Services
Accordion success showcase
A navy section with a faint tyre-track texture: eyebrow, big white heading and an accordion of results on the left (the open one a raised card with an orange left edge), and on the right that item's port photo with a white info card over its lower-left corner.
Navigation
Ship CTA footer
A tall dark footer over a photo washed navy-to-black: a big uppercase call to action with orange words and a pill, then brand, tagline and email sign-up beside Services / Company / Contact columns split by hairlines, and a legal bar with round social buttons.
Content & Layout
Chamfer blog cards
A centred latest-articles section with two wide white cards, each one link: a photo with a chamfered top-left corner, an orange date, a title, a hairline and the author's avatar and name.
Content & Layout
Dotted process steps
A light grey band: centred orange eyebrow and big navy heading over three steps (a pale medallion with a line icon, an orange half ring and a number badge, then a title and text) joined by dotted curved arrows that draw in on scroll.
Social Proof
Logo marquee strip
A trust strip: a bold "10,000+ trusted customers" line between hairlines over a row of logo cards scrolling left forever, either plain or inside a pale rounded tray. Pauses on hover and focus; wraps into a static grid under reduced motion.
Content & Layout
Numbered FAQ photo
A centred FAQ: numbered questions in a pale panel beside a large photo. Native <details> in one exclusive group, so opening one closes the others; the orange + turns into an × and the answer height animates where supported.
Social Proof
Portrait rating testimonials
A centred testimonial section: four quote cards in two outer columns (quote mark, quote, avatar, name, role, star score) around a tall portrait photo that fades to navy and carries an overall rating with stars and a review count.
Services
Service photo cards
A services section: eyebrow, heading and an orange pill over three tall photo cards, each one link with a white panel. On hover the photo zooms, the icon tile turns orange, the arrow slides through and a description opens in the panel.
Content & Layout
Chamfer step cards
A how-it-works section: eyebrow, big heading and intro across the top, then three step cards — a photo with both top corners chamfered and a pale caption panel overlapping its foot with an orange step pill, title and sentence.
Content & Layout
Committed about split
A two-column about section: a rounded photo beside an orange eyebrow, heading, paragraph, three » points and an orange pill. mediaSide swaps the sides; a videoUrl turns the photo into a video thumbnail with a play button and a modal player.
Conversion
Freight pricing plans
A pale pricing band: eyebrow, big uppercase heading and a photo on the left; two white plan cards on the right, each with an orange asterisk, optional badge, name, pitch, big price, full-width orange pill and a checklist.
Content & Layout
Sticky project stack
A navy projects section with wide project cards that stack as you scroll: each card sticks 120px from the top and the next slides up over it. Pills, uppercase title, paragraph, orange pill and a photo with a chamfered corner.
Services
Hover service list
A services section: eyebrow, big heading and intro across the top; a tall photo with a frosted caption beside four service rows (navy icon tile, title, tag pills, round arrow). A hovered row floods orange, its icon tile turns white and its arrow tilts.
Metrics
Icon stat band
A navy band over a dimmed road photo with four stats: orange line icon, a big white figure that counts up from zero, and a label. The row rises 40px into view; stacks to one centred column on a phone.
Services
Photo feature trio
A pale band with an outlined eyebrow left and a big uppercase heading right, over three white cards: two-line uppercase title, round orange icon, and a landscape photo filling the foot. Cards lift in, staggered.
Heroes
Circle badge hero
A white hero with an orange eyebrow, a two-size uppercase heading, avatars and a big client figure, over a full-bleed navy-washed photo with a rotating circular text badge on its top edge and an orange arrow block beside a white link block at the bottom right.
Metrics
Flanked stat overview
A company overview: centred eyebrow, big uppercase heading with an orange phrase, paragraph and pill, flanked by two tall photos with chamfered inner corners, over a row of navy / orange / navy stat cards with line icons.
Heroes
Tag headline hero
A 900px photo hero washed navy from the left: a translucent eyebrow chip, a huge two-line uppercase headline with an orange tag box between the words, and a framed thumbnail beside a sentence and an orange pill. Rises in on load.
Navigation
Scroll pill header
A 1350px pill bar fixed 20px from the top: a faint white wash with white type over the hero, solid white with navy type once the page scrolls. Centred links with a small dropdown, an orange quote pill whose arrow tilts on hover, and a round menu button with a white card below 1000px.
Navigation
Solid bar header
A 104px white header in the page flow: truck mark and wordmark, a centred row of links where Home, Services, Pages and News open dropdown panels (their "+" turns and the label goes coral on hover), and an orange "Free Quote!" pill whose arrow turns on hover. Folds to a menu button and a white card below 1200px.
Navigation
Lime contact footer
A dark green-black footer: logo tile and two-line wordmark, tagline and icon links, Explore and Company columns, a contact column with a lime pill, and a hairline-boxed legal bar. Static, no script.
Conversion
Dark image CTA card
A 1120×300 rounded ink card in a white band: lime eyebrow, big white heading, a paragraph, a lime and an outline pill, and a photo edge to edge on the right that slides in on scroll. Photo drops on a phone.
Content & Layout
Split intro FAQ
A text-only FAQ: an intro column (lime-dot label, big heading, short paragraph) that stands beside the question list and stays in view on wide screens, and question rows on hairlines with a ring whose plus turns into a minus when open. Native <details>, no script.
Conversion
Route quote estimator
A rounded ink card on a pale band: eyebrow, big heading, paragraph and two badges on the left; a white live estimator on the right — origin, destination, mode, weight and shipment type recalculate a price range and transit time from a rate table you pass in.
Content & Layout
Industry tabs panel
A light section with a lime-dot eyebrow, a big heading, a row of pill tabs and one 1240×520 rounded panel — photo on the left, ink side with heading, paragraph, two lime stat tiles and a lime pill. Real WAI-ARIA tabs; stacks below 810px.
Content & Layout
Control tower showcase
A dark product section: lime-dot eyebrow, huge white heading, paragraph, four check-mark features and a lime pill link, beside a light dashboard mock with a status pill, a photo tile and three KPI tiles. Features and tiles slide in on scroll.
Services
Color service grid
A light services section with a big centred heading and a 3×2 grid of tall rounded cards in six colours: icon tile, huge faded index number, title, text and an "Explore service" link. The first card carries a photo behind a gradient. Each whole card is one link.
Metrics
KPI card strip
A pale blue-grey band with a lime-dot eyebrow, a heading and a hairline-divided scoreboard panel of metric cells, each with an accent bar, a big figure, a label and a caption; four across, two by two on tablets, rows on phones.
Social Proof
Partner chip band
A dark band with soft corner glows, a lime-dot eyebrow, a centred heading and a row of rounded partner chips, each tinted in its own hue with a glyph and a wordmark. Chips lift and deepen their tint on hover and fade up, staggered, on first view.
Heroes
Dashboard glass hero
An 860px full-bleed photo hero under a dark glass wash: lime-dot eyebrow, a four-line headline with alternate lime lines, two pill buttons, tracked labels, a network-signal pill and an avatar trust card, beside a translucent operations dashboard with stat cells, a live-network row and an expandable forecast row.
Navigation
Glass nav header
A 1170px dark glass bar floating over the hero: logo and wordmark, centred links, a Contact link and a lime "Get a quote" pill that swells on hover. Folds to a menu button and a glass card below 960px.
Content & Layout
Signal ticker bar
A 38px lime strip for the very top of a page: uppercase, tracked, heavy claims separated by "+". Static as measured; an opt-in CSS marquee pauses on hover and focus and never runs under reduced motion.
Navigation
Wordmark marquee footer
A rounded navy footer panel over a full-bleed photograph: brand, blurb and icon links, three link columns, a copyright bar, and a huge display wordmark scrolling sideways along the bottom.
Conversion
Image CTA band
A rounded accent band with an outlined eyebrow, a big two-line display heading, a white pill button with a navy arrow disc and a picture held inside the band. Stacks below 810px.
Content & Layout
Article card row
A blog band: eyebrow pill, centred display heading, three article cards (rounded image, date chip, display-face title, one link each) and a "View all" pill whose navy disc floods on hover.
Content & Layout
Sticky image FAQ
An eyebrow, display heading and pill link over a two-column FAQ: a photo card pinned 50px from the top while rounded accordion rows scroll past, their navy plus turning over into a minus.
Conversion
Quote request panel
A rounded navy panel over a photo: eyebrow, display heading and a glass phone/email strip on the left, a white two-column freight-quote form with a full-width orange submit on the right.
Social Proof
Stacked review cards
A centred testimonials heading over full-width review cards (photo left; quote mark, display-face quote and a person row with avatar, role and company mark right) that pile on top of each other as you scroll. Pure CSS; a plain column on phones.
Media & Effects
Scroll zoom video
A media band whose rounded video or still starts at half size and grows to fill the band as it scrolls into view. CSS scroll-driven, no scroll listener; full size under reduced motion or without support.
Content & Layout
Sticky process steps
A sticky heading block beside numbered process steps, each an image, title and line of text, threaded on a vertical line that fills as the section scrolls past. CSS scroll-driven fill; drawn full without support or under reduced motion.
Content & Layout
Image bento features
A "why choose us" band: eyebrow pill, centred display heading, then a five-tile bento of navy and orange text tiles and photo tiles, with a tall captioned photo spanning both rows. One column on phones.
Services
Stacked service cards
A navy services band: a sticky image card with a huge display heading on the left, and numbered service cards on the right that pile on top of each other as you scroll, the covered ones shrinking slightly. Pure CSS; a plain column on phones.
Content & Layout
Mission stat about
An about band: eyebrow pill, a large display statement with an outline button, then a photo, a navy mission card with award badges, and an outlined vision card led by a stat that counts up once when scrolled into view.
Social Proof
Bordered logo grid
An editorial proof wall: client logos in a ruled, hairline-divided wall with the heading set in the wall's first cell. The column count follows the number of logos so rows come out full, marks are sized for equal weight from their aspect ratio, and type is inherited from the page.
Heroes
Service ticker hero
A full-viewport photo hero with a navy wash, a partner badge and a huge two-line display heading, plus a white card that ticks through your services on a filling progress line, with pause and step controls.
Navigation
Overlay pill header
A header laid over the hero: brand left, a frosted glass pill of links with one dropdown in the middle, a white pill CTA with a navy arrow disc on the right. Folds to a menu button and a drop-down card below 1024px.
Conversion
Sales contact section
A headline and a paragraph beside a bordered form card, with two-up fields, real selects and a fine-print line that carries its own links.
Conversion
Project brief form
A dark intake form built out of questions rather than labels, with multi-choice answers as pills you select instead of boxes you tick.
Conversion
Contact split form
A centred contact form — heading, reach-us line, real validating fields and a checkbox group. Pass an image and it becomes the two-column split it was measured from.
Content & Layout
Split stat feature section
A two-column feature section: an eyebrow, a large uppercase heading and a row of hairline-divided figures on the left, a grid of ringed-icon cards on the right.
Media & Effects
Twinkling grid
A skewed graph-paper grid with squares lighting up and fading out at random around it, behind a soft radial mask. No JavaScript: an SVG pattern and one CSS keyframe.
Media & Effects
Mesh gradient
Broad fields of colour bleeding into one another over a slowly warping plane, blended by inverse distance from a handful of drifting anchors. A background and nothing else: it ships no copy.
Media & Effects
Wave backdrop
Soft ribbons of colour drifting across a dark field, drawn on a 2D canvas with a trail and a heavy blur. A backdrop and nothing else: it ships no copy, and whatever belongs on top goes in the slot.
Conversion
Smoke CTA
A dark closing card with violet smoke rising through it, a headline, two actions, and a scrim that keeps the copy readable however bright the field gets.
Conversion
Dithered CTA
A large rounded closing card with a slowly marbling field of halftone dots behind the copy, and one button. The field speeds up while the card is hovered or holds focus.
Social Proof
Testimonial roster
A testimonial with the person attached: a portrait card carrying a headline figure beside the quote, over a roster of everyone with something to say. Pick a face and the pair changes together.
Navigation
Directory footer
A full-bleed dark site footer: a brand block with a blurb and social marks beside a directory of link columns, over a bottom bar carrying the copyright, the legal links and a back-to-top control.
Media & Effects
Silk wave
Soft bands of colour folding across each other like light on water, drawn by one fragment shader on a single full-screen triangle.
Navigation
Centered logo footer
A site footer with a centred brand mark over one row of links, a dashed hairline, and a bottom row carrying the copyright opposite a set of labelled icon links.
Media & Effects
Dusk glow
A dark dome with a coloured glow rising around it, drawn as one oversized radial gradient — a page backdrop, a hero ground, or a layer behind content that already exists.
Media & Effects
Starfield
A perspective starfield flying toward the viewer on one canvas, as a page backdrop or behind a hero's own content.
Content & Layout
Step reveal rail
An editorial process rail: numbered steps side by side under a progress rail, where the chosen step widens to uncover its illustration and the rest close to clean columns of text. Keyboard, tap and pointer all choose a step; narrow rails become a list that reveals the chosen step's picture.
Social Proof
Profile card
A square portrait in a rounded frame, a verified name and bio, and a footer of marks for what the person offers beside a view control that links out or reports the press.
Content & Layout
FAQ accordion
Numbered questions stacked as one card. The open row lifts out of the stack as a card of its own, and the rows either side round off to meet the gap.
Services
Service accordion
A numbered list of services on a dark ground. One row opens at a time, the panel grows from nothing, and the title fills with white from its left edge.
Content & Layout
Process flow grid
A sequence of steps laid out as a grid that reads back and forth, with arrows drawn through the gaps from each step to the next.
Social Proof
Quote testimonial
One testimonial at a time: a large serif quote that rises into place a word at a time, beside a portrait that wipes in with it.
Media & Effects
Drifting card rail
A full-bleed rail of tall cards that drifts sideways on its own, can be grabbed and flung, and loops forever without a seam.
Navigation
Floating panel header
A fixed header that floats as a rounded bar, narrows into frosted glass once the page scrolls, and drops icon-row panels from its navigation.
Conversion
Squishy pricing card
A single pricing card that squashes slightly on hover, then springs up past its target and settles, with the price figure growing on the same curve.
Media & Effects
Shimmer border card
A dark card whose hairline border carries bright arcs sweeping continuously around the perimeter, brightening on hover and on keyboard focus.
Media & Effects
Blur image card
A small crystal-glass card that blurs the section behind it, with its own image as a soft colour field, turning over on a horizontal 3D flip to show its details on the back.
Social Proof
Staggered logo cloud
A centred "trusted by" row whose whole set of logos is replaced on a timer, each one blurring out to the right as its replacement arrives from the left a beat later.
Media & Effects
Centered card carousel
A full-bleed carousel whose active card sits centred with its neighbours peeking in from both edges, driven by arrows, dots, keyboard, drag or swipe.
Navigation
Capsule header
A fixed site header that contracts into a centred, blurred capsule once the page scrolls, collapsing its brand word and tightening its spacing as it goes.
Content & Layout
Icon feature grid
A short editorial lead-in above a dense grid of icon-topped feature cards that trade colours with their icon tile on hover.
Navigation
Sticky mega menu header
A sticky site header that frosts on the first pixel of scroll, opens wide mega panels from its nav, and collapses to a full-screen sheet.
Social Proof
Social proof closer
A dark closing section stacking a pull quote beside review artwork, a row of headline figures, and a call to action over a soft glow.
Navigation
Expanding pill nav
A floating glass navigation pill that widens once the page scrolls, and collapses its links behind a toggle on small screens.
Media & Effects
Focus reveal statement
A centred statement whose words come into focus one after another as the page scrolls past, blurring again on the way back.
Content & Layout
Pinned feature tour
A feature panel that pins to the viewport and advances step by step as the page scrolls past it.
Content & Layout
Overlapping feature tabs
A vertical tab list of features beside the artwork for the selected one, over a tinted panel that overlaps the seam.
Conversion
Split image CTA
A call to action laid out as one rounded card split between copy and a full-bleed image.
Media & Effects
Image comparison slider
Two versions of one scene in a single frame, with a divider you drag, tap or arrow across to reveal each.
Content & Layout
Bento feature grid
A centred statement over an asymmetric grid of dark feature cards whose media zooms and plays under the pointer.
Heroes
Framed hero
A full-viewport hero inside a rounded panel, with a scrimmed backdrop and a headline that rises line by line.
Navigation
Panel footer
A site footer drawn as a rounded dark panel inset from the page edge, with link groups, contact details and a call to action.
Metrics
Metric statement
A centred statement over a row of metrics that count up when the section scrolls into view.
Services
Service showcase
Alternating service rows pairing a window-framed media panel with an exclusive accordion and a call to action.
Content & Layout
Process timeline
A numbered vertical timeline whose rail fills as you scroll, beside a sticky list of principles.
Content & Layout
Capability grid
A ruled grid of numbered capability cells closing on an inverted panel, with a hover rule that wipes in.
Content & Layout
Problem ledger
A sticky editorial intro beside a numbered, hairline-ruled list whose rows indent on hover.
Social Proof
Story carousel
A fanned stack of customer-story cards on a gradient band, with dot controls and a timed advance.
No components match that.