Dividers

Narrow visual bands between the big sections, whatever they carry: client logos, trust marks, a single line of text.

  1. Logos
  2. LogoCards
  3. Strip
  4. BannerImage

Logospopularsections/Logos.astrosub-blocks: Logoon 2 sites of the fleet

Logos — a row of client, partner or certification logos (<Logo>) on a muted band, under a small uppercase title. Use for: "trusted by", "our partners", "certified by" — recognition, not contact. Not for: partners the reader should contact (<LogoCards>). Children: <Logo image title href /> tags. Logos are shown at one height (48px) and kept in proportion; on a dark or brand band they are turned white automatically, so dark marks on transparent backgrounds work best. Layout: `columns` 3–6 (default 5) on desktop; two per row on phones.

sample

TRUSTED BY GROWERS ACROSS THE REGION

  • Nordvind
  • Almara
  • Kestrel
  • Vinland
  • Orsa

LogoCardssections/LogoCards.astro

LogoCards — logos as white cards with a name and contacts under them (<Logo image title email phone />). Use for: distributors, resellers, partner offices — where the reader is meant to get in touch, not just recognise a brand. Not for: a plain logo row (<Logos>). Children: <Logo> tags with `title` and at least `email` or `phone`; a <Logo> without contacts renders as a bare logo in the grid. Layout: `columns` 2–4 (default 3).

sample

Stripsections/Strip.astroon 1 site of the fleet

Strip — a narrow brand-coloured band with one line of uppercase text: the welcome line under the hero, a slogan between sections. Use for: separating and branding — one sentence the page should say out loud. Not for: anything with a button (<CtaCentered>); it is not a call to action, there is nothing to click. Children: none. Theme: "brand" (default) the primary gradient; "dark" a stone band.

sample

BannerImagesections/BannerImage.astroon 1 site of the fleet

BannerImage — a full-width band of one photo, or of several photos cross-fading into each other. Use for: a visual pause between sections — a workshop, a landscape, a product line — with no text on it. Not for: a first screen with a title (<HeroCover>); a photo with a caption (<Gallery>). Children: none. Pictures: `imageName` is one file name in images/ or an array of them; use WIDE photos (the default band is about 4.4:1, `aspect` changes it as a Tailwind aspect class such as "aspect-[3/1]"). Several photos rotate every `interval` seconds, and stay still for visitors who prefer reduced motion.

sample

Source links point to engine-astro@7b686388. Samples are demo content: the components are the real ones, the copy and the pictures are made up.