iCreate Astro Component Library
Browse the library
Components, design tokens and typography — sourced from the Figma "test - astro" file and kept 1:1 with its variables. Open the Theme panel (bottom-right) to recolour and re-font the whole library live. View the Figma file ↗
Components
Foundations
Section Full-bleed section band owning background colour + vertical rhythm (--section-pad-* tokens). Sets the paired *-content text colour so children inherit correctly. Container Centres content at a standard max width (--width-narrow/content/wide tokens). Use inside a Section — the Section owns the horizontal gutter. Stack Vertical flow with consistent rhythm — column flex with a --space-* token gap. Cluster Horizontal wrapping group for button rows, tag lists, logo rows — wrap flex with a --space-* token gap. Grid Responsive card/feed grid — auto-fits columns to a minimum item width by default, or holds an explicit count that collapses at the section breakpoints (900px / 560px). Accordion A fully accessible WAI-ARIA accordion built on native <details>/<summary>, with smooth open/close transitions (uses ::details-content, which has limited browser support outside modern Chromium/Firefox). Figma: Primitives / Accordion Tabs A fully accessible tabs component following WAI-ARIA guidelines, with arrow-key navigation between tabs. Ships with four CSS skins — default (boxed), tabs-compact, tabs-underline, tabs-pill — applied via the class prop; skins live in primitives.css, not the vendored component. Figma: Primitives / Tabs Modal Accessible modal dialog (native <dialog>) with focus trapping, Escape/backdrop dismissal, and view-transition-safe trigger binding; expose window.closeModal() to close programmatically. Requires a trigger element with a matching id to exist in the DOM before render or the component throws. Figma: Primitives / Modal Tooltip Accessible tooltip using the Popover API and CSS anchor positioning; full support in Chromium, degrades gracefully in Firefox/Safari. Figma: Primitives / Tooltip Badge Inline badge component with support for multiple semantic types, sizes, pill/circular variants, button mode with hover animations, and pulse animation for attention-grabbing. Figma: Primitives / Badge Heading Semantic heading with the level decoupled from the visual style — `size` uses the primitives fluid scale, `typeStyle` applies a .type-* Figma text style instead (marketing-section contexts). Prose Rich-text wrapper for slotted CMS/markdown content — styles p, lists, links, blockquotes with the official long-form scale (16px / line-height 1.5). Colour inherits, so Section bg pairings recolour it. Avatar Display user images, initials, or placeholder icons with optional title/subtitle labels. Supports multiple sizes (sm/md/lg), shapes (round/square), and semantic types (default/info/success/warning/error). Figma: Primitives / Avatar Breadcrumbs Accessible breadcrumb navigation following WAI-ARIA guidelines with support for text and icon items. Figma: Primitives / Breadcrumbs Pagination Fully accessible pagination nav with first/previous/next/last controls; supports custom render callbacks (renderProgress, renderPageLabel) for localising the progress text and link aria-labels. Figma: Primitives / Pagination Notification Versatile notification component with support for info, success, warning, error types; supports default and accent variants with optional icon display. Figma: Primitives / Notification Toast Stacked, auto-dismissing notification toasts driven by a global window.toast API (show/success/error/info/warning/dismiss/dismissAll) exposed by ToastProvider; Toast is the individual message rendered inside it. Figma: Primitives / Toast Foundations / Cookie Consent Banner Dismissible cookie-consent bar; persists the choice in localStorage (tested store) and dispatches an `icreate:consent` event for analytics gating. Hidden until JS confirms no prior choice — no dead bar with JS off. Utility component: no tone axis. Figma: Foundations / Cookie Consent Banner
Navigation
Header / Standard The house header: logo left, nav centre, phone (accent serif) + pill CTA right. Burger + slide-down panel below 900px. Canonical reference for all header variants. Figma: Header / Standard Header / Topbar Utility strip (tagline left, phone + email right) above a logo-left/nav-right main bar. Topbar hides below 900px; contacts move into the burger panel. Figma: Header / Topbar Header / Centered Brand-led stacked header: phone / centred logo / CTA on a 3-col grid, nav row beneath a subtle divider. Single bar + burger below 900px. Figma: Header / Centered Header / Split Nav Premium branding header with nav links split either side of a centred logo on desktop; collapses to a standard bar + slide-down panel (with phone) below 900px. Figma: Header / Split Nav Header / Mega Menu Header with logo, centred nav, phone + CTA pill, and one nav item that opens a full-width mega dropdown (link-group columns + optional feature card) for multi-project property developers. Collapses to a burger below 900px, with mega groups flattened into the mobile panel as plain sections. Figma: Header / Mega Menu Header / Drawer Boutique/creative header: minimal bar with logo, phone + CTA (hidden below 900px), and an always-visible burger that opens a slide-in right-side drawer with large stacked nav links and bottom phone/CTA. Figma: Header / Drawer Header / Overlay Transparent header absolutely positioned over hero imagery, light-on-image text with optional legibility scrim. Mobile panel is always solid base-100. Figma: Header / Overlay Nav / In-Page Anchor Bar Sticky in-page anchor bar that scroll-jumps to on-page sections, with an active-section highlight. Anchors work with no JS; scrollspy + smooth-scroll are progressive (IntersectionObserver, reduced-motion aware). Tone via the shared contract. Figma: Nav / In-Page Anchor Bar Nav / Sidebar Section Nav Sticky vertical section-nav rail with active-section highlighting; collapses to a disclosure on mobile. Anchors work without JS (IntersectionObserver + mobile toggle are progressive). Tone via the shared contract. Figma: Nav / Sidebar Section Nav Nav / Breadcrumb + Page Title Band Interior-page header band — breadcrumb trail (Breadcrumbs primitive) above an H1 page title, with an optional subtitle. The final crumb renders as the current page. Tone via the shared contract. Figma: Nav / Breadcrumb + Page Title Band Nav / Mega Footer Sitemap Multi-column footer sitemap navigation for large sites (distinct from the contact/brand footers), with an optional legal + copyright row. Columns reflow responsively. Tone via the shared contract. Figma: Nav / Mega Footer Sitemap
Heroes & Page Banners
Hero / Standard Full-width hero band — photo under a dark scrim, small-caps subheading (H6) above the page H1, aligned bottom-left on the content grid. Text is literal white by design (sits on the photo, not a themed surface). Figma: Hero / Standard | Sub heading small above Page Banner / Solid Slim interior-page title band on a solid colour tone. Covers the Figma Centre-Text and Left-Text [library] sets via the align prop. Figma: Page Banner / Solid colour | Centre Text [library] Page Banner / Image Slim interior-page title band over a background photo with a legibility scrim (text literal white by design, as HeroStandard). Covers the Figma Centre-Text and Left-Text components via the align prop. Figma: Page Banner / Background image | Centre Text
Content Sections
FeatureVideoTwoTone Dark primary header band with a title overlapping a video container and play button. Figma: Feature Video / Two Tone AboutUsIntroLeftImage Secondary (sage) split section: portrait image left, heading + prose + CTA right. Figma: About Us Intro / Left image Value Prop / Simple Paragraph Two-column value proposition — large serif heading left, small-caps subheading (H5) + body copy right. Built on Section/Grid; tone via the shared contract. Figma: Value Prop / Simple Paragraph Two Column Media + text section — image left or right (side) with three image treatments (fit: standard / filled / stretched). Eyebrow + heading + optional CTA are props; body copy in the default slot. One component consolidating the six Figma Two Column sets. Tone via the shared contract. Figma: Two Column / Image left One Column Centred single-column text block — H3 heading + body copy, centre-aligned, on a full-width toned band. size sets the content width (xl 1170 / l 970 / m 770 / s 570). One component consolidating the four Figma One column sets. Tone via the shared contract. Figma: One column / Large Stats Band Credibility "by the numbers" band — a responsive row of big-number stat tiles (value + label), optional heading, optional count-up-on-scroll. Big Fraunces numerals + Archivo labels. Tone via the shared contract. Net-new component (no legacy/Plum equivalent). Figma: Stats Band The Plan / Standard Three-step plan band — heading + accent pill CTA left, numbered steps with rule-underlined numerals right. Numerals are CSS counters. Tone via the shared contract. Figma: The Plan / Standard Value Prop / 3 Col Cards Centred heading + subheading over photo-topped value cards with small-caps headings. Cards stay on the base surface pair; tone via the shared contract. Figma: Value Prop / 3 col cards Value Prop / Icon Boxes Heading + intro over outlined boxes with primary icon tiles and small-caps headings. Icons come from the src/icons/ set by name. Tone via the shared contract. Figma: Value Prop / icon boxes Stakes / Standard Centred StoryBrand stakes statement — large serif headline over a short supporting paragraph. Tone via the shared contract. Figma: Stakes / Standard Content / FAQ Accordion Section wrapper around the Accordion primitive — heading, optional intro, and a Q&A list. Single-open (native <details name> grouping) by default. Tone via the shared contract. Figma: Content / FAQ Accordion Content / Vertical Timeline Vertical chronological timeline of dated entries (distinct from The Plan's 3-step flow). Optional reveal-on-scroll that is reduced-motion aware; entries render fully visible with no JS. Tone via the shared contract. Figma: Content / Vertical Timeline Content / Feature Comparison Table Compare plans/options/competitors across features; boolean cells render an accessible tick/cross. Stacks into per-column cards on mobile (no horizontal body scroll). Tone via the shared contract. Figma: Content / Feature Comparison Table Content / Pricing Plan Cards 2–4 tiered pricing/plan cards with feature lists and a "most popular" accent; equal-height cards. Supply `priceAnnual` on any plan to render a monthly/annual billing toggle (no-JS, CSS :has(); prices selected via the unit-tested selectBillingPrice). Tone via the shared contract. Figma: Content / Pricing Plan Cards Content / Pull-Quote Statement Large single quote/statement band with optional attribution (distinct from the multi-card Testimonial sections). Tone via the shared contract. Figma: Content / Pull-Quote Statement Content / Article Meta Article context band — breadcrumb trail plus category, publication date, read time and an optional byline with portrait. Sits between the article banner and the body copy. Tone via the shared contract. Content / 404 Not Found Friendly 404 section — large code, message, optional site-search, and quick links back into the site. Works without JS. Tone via the shared contract. Figma: Content / 404 Not Found Property / Location & Amenities Lazy-loaded embedded map beside a categorised list of nearby amenities (schools, transport, shopping). The POI list is server-rendered and usable even if the map fails to load. Tone via the shared contract. Figma: Property / Location & Amenities
Social Proof
TeamFeed3ColCardsWithDesc Primary (olive) grid of staff bio cards — photo top, role + name + bio + profile link. Figma: Team Feed / 3 col cards with desc Testimonial Feed / Card Bubbles Centred heading over white review cards — quote mark, accent star rating, body copy, small-caps author. Figma's carousel dots replaced by CSS scroll-snap on small screens (no JS). Tone via the shared contract. Figma: Testimonial Feed - Card bubbles Social Proof / Logo Wall "As trusted by" responsive grid of client/partner logos, with optional greyscale-to-colour on hover/focus. Static — no JS. Tone via the shared contract. Figma: Social Proof / Logo Wall Social Proof / Case Study Spotlight Featured case study — challenge/result narrative beside a feature image, with a headline metric (optional count-up; the final value is server-rendered so no-JS shows it). Tone via the shared contract. Figma: Social Proof / Case Study Spotlight
Listings & Cards
Card Versatile card with image, title, meta, description and footer areas; supports astro:assets Image via imageComponent for optimized local images. Figma: Primitives / Card Article Card Editorial preview card — cover image, category label, headline, excerpt and a date / read-time meta line. The whole card is one link target. Stays on the base surface pair regardless of the band tone around it. Article Feed News/article feed — optional heading, optional client-side filter chips, and a responsive grid of article cards. Filters by content pillar or by project. Without JavaScript the chip bar never appears and every article is listed. Article Featured Editorial lead for a content hub — one article at feature weight, with a large cover image beside a category label, headline, standfirst, byline and read-on link. Image side is switchable. Project Spotlight Cards Grid of development projects — cover image, status badge, name, locality and links to the project's content hub and campaign site. Supports a dashed 'future project' placeholder card showing how the next project slots into the same template.
Forms & CTAs
CTA / Free Appraisal Squares Conversion band — flush square photo left, appraisal enquiry form (underline fields, accent pill submit) right. Field labels are visually hidden but present for screen readers. Tone via the shared contract. Figma: CTA / Free Appraisal / Squares Form Progressive-enhancement form wrapper with built-in client-side validation, aria-invalid state management, and an accessible error summary notification shown on failed submit. Figma: Primitives / Form Input Progressive-enhancement input field with built-in validation and accessibility, showing an inline error message when aria-invalid. Figma: Primitives / Input Textarea Progressive-enhancement textarea field with built-in validation and accessibility, showing an inline error message when aria-invalid. Figma: Primitives / Textarea Checkbox Simple checkbox field for use within forms and fieldsets. Figma: Primitives / Checkbox Radio Simple radio button field for use within forms and fieldsets; radios sharing a name form a group. Figma: Primitives / Radio Fieldset Fieldset wrapper for grouping form controls (e.g. checkboxes/radios) with group-level validation support; supports a 'minimal' borderless variant. Figma: Primitives / Fieldset Select Styled select with bundled label and validation message — iCreate local addition mirroring the Input API and DOM, so the vendored Form's progressive-enhancement validation works on it unchanged. Token-coloured gradient chevron, no wrapper markup. Figma: Primitives / Select CTA / Newsletter Signup Band Inline newsletter email-capture band — email field + submit via the Form/Input primitives (attribute + native validation), so it works without custom JS. Tone via the shared contract. Figma: CTA / Newsletter Signup Band CTA / Simple Banner Focused headline + CTA band (no form, no photo), with an optional secondary link. Tone via the shared contract. Figma: CTA / Simple Banner Form / Multi-Step Wizard Progressive multi-step form with a step indicator; Next is gated on the current step's required fields (tested logic in lib/sections/interactions). No-JS renders all steps as one submittable form. Tone via the shared contract. Figma: Form / Multi-Step Wizard Forms & CTAs / Register Interest Property register-interest lead-capture — contact + development/stage/lot fields + a required privacy-consent checkbox. Native + attribute validation; a progressive script gates submit on the tested isSubmitAllowed/isValidEmail helpers. Tone via the shared contract. Figma: Forms & CTAs / Register Interest
Footers
Footer / Standard Standard site footer — logo left, contact block + circular social icons right, divider, then copyright/legal-links strip with optional agency credit. Built on Section (as="footer"); tone via the shared contract. Figma: Footer / Standard Footer / 2 Columns Two-column footer — logo left, address + phone + social icons right-aligned, divider, then copyright/legal strip. Built on Section (as="footer"); tone via the shared contract. Figma: Footer / Standard | 2 cols Footer / Centered - 3 Columns Centre-aligned footer — logo centred on a rule, then Quick Links / Contact Us / Social columns, a rule, and the copyright/legal strip. Tone via the shared contract. Figma: Footer / Center Aligned - 3 Columns Footer / Quicklinks Footer with logo + social icons left, and Contact Us (icon-led) + Quick Links (menu) columns right, each under a short rule; divider and copyright/legal strip. Tone via the shared contract. Figma: Footer / Quicklinks Footer / Background Image Full-bleed footer over a background photo with a legibility scrim — centred logo, social icons, phone and address in white, then the copyright/legal strip. Not toned (white on photo by design, like HeroStandard). Figma: Footer / Centred / Background Image
Media & Buttons
Button A versatile button with variants, sizes, and delightful animations including hover effects and pulsating attention-draw. Renders as a <button>, or as an anchor styled identically via as="a" + href — use for CTAs that navigate (see the .button-cta skin). Figma: Primitives / Button Icon Inlines a named SVG from src/icons/ at build time — no runtime fetch, no dependency. Icons inherit currentColor; decorative (aria-hidden) unless ariaLabel is passed. The icon set + naming convention live in src/icons/README.md. Figma: each glyph is a component on the Primitives page Icons band, named identically to its file. Figma: Primitives / Icons band (12 components) Img Section-imagery workhorse — lazy + async by default, arbitrary aspect-ratio, object-fit/position art direction, radius control. Pass imageComponent (astro:assets) for optimised local images or src for plain/CMS URLs. Complements Media (ratio presets, baked radius). Media Responsive media component with support for various aspect ratios (1:1, 4:3, 16:9, 21:9, auto) and configurable loading strategies. Figma: Primitives / Media Video Responsive video component with YouTube embed support, privacy enhancements (youtube-nocookie), and configurable aspect ratios. Figma: Primitives / Video Media / Gallery Lightbox Grid Responsive image grid that opens a <dialog> lightbox with keyboard prev/next and Escape-to-close. Thumbnails link to the full image with no JS. Tone via the shared contract. Figma: Media / Gallery Lightbox Grid Media / Before-After Slider Draggable before/after image comparison. Range-input control is keyboard-accessible; the frame is pointer-draggable; a static split shows with no JS. Tone via the shared contract. Figma: Media / Before-After Slider
Colours
Brand
--color-primary
#4b5a49
--color-primary-content
#ffffff
--color-secondary
#dee5bf
--color-secondary-content
#1a1a1a
--color-accent
#d14e27
--color-accent-content
#ffffff
--color-neutral
#3a3a3a
--color-neutral-content
#ffffff
Base / surfaces
--color-base-100
#ffffff
--color-base-200
#f3f4f6
--color-base-300
#d1d5db
--color-base-content
#1a1a1a
Status
--color-info
#3abff8
--color-success
#36d399
--color-warning
#fbbd23
--color-error
#f87272
Typography
.type-h1 The quick brown fox jumps over the lazy dog
H1 · 64 / 1.2 / -2%.type-h2 The quick brown fox jumps over the lazy dog
H2 · 48 / 1.2 / -2%.type-h3 The quick brown fox jumps over the lazy dog
H3 · 40 / 1.2 / -2%.type-h4 The quick brown fox jumps over the lazy dog
H4 · 24 / 1.2 / 0.type-h5 The quick brown fox jumps over the lazy dog
H5 · 18 / 1.2 / +5%.type-h6 The quick brown fox jumps over the lazy dog
H6 · 16 / 1.2 / +5%.type-body The quick brown fox jumps over the lazy dog
Body · 16 / 1.3 / 0.type-important The quick brown fox jumps over the lazy dog
Important · 20 / 1.3 / 0.type-caption The quick brown fox jumps over the lazy dog
Caption · 14 / 1.2 / 0.type-blockquote The quick brown fox jumps over the lazy dog
Block Quote · 20 / 1.3 / 0