Blinco block library

115 hand-built sections across 13 families. Every one passes the validator in 4 palettes × RTL/LTR × 3 widths. Tap any block to see it in all four palettes.

contact 8

contact-card-floatA tinted band of contact details with the lead form on a raised card overlapping its block-end edge. Reads as one designed moment rather than two stacked boxes.
contact-centered-formA narrow centred lead form under a headline and one line of promise. The quietest contact block — right when the page has already said everything.
contact-details-listDetails-first contact: hours, address, phone and email as labelled rows with drawn icons, with a compact three-field lead form beneath.
contact-hours-mapOpening hours as a labelled table plus address and an optional map image slot inline-start, the lead form inline-end. For businesses people walk into.
contact-inline-simpleHeadline plus a single-row inline form — name, phone, send. The cheapest possible ask, for pages that already made their case.
contact-panel-darkThe lead form inside an inverted ink panel sitting on a light section — the page's closing statement. All inner text derives from --bg, so it flips correctly on dark themes.
contact-split-formContact details (address, hours, phone) inline-start, the lead form on a tinted plane inline-end. The default contact block for any site.
contact-two-column-choiceTwo intents side by side (book a visit / ask a question) as drawn radio choices, feeding ONE shared lead form. Qualifies the lead before a word is typed.

content 5

content-proseA headline over one well-measured prose column with an optional lead-in and subheads. For text that has to be read: an about page, a method, a policy.
content-pull-quoteA single large pull quote in a hairline frame with an attribution line. Breaks up a long page and lets one honest sentence carry a whole section.
content-split-noteSection headline in a sticky margin column inline-start, the story inline-end. The standard about/story section — the prose keeps its measure at any width.
content-team-gridSquare portraits with a name and a plain role. The block that turns a supplier into people — copy must stay honest: names and roles only, never invented credentials.
content-timeline-historyDated milestones down a rail — year, title, one line. Proof of continuity for businesses whose age is the argument.

cta 5

cta-bandA full-bleed inverted field with one statement and one button — the single moment the page raises its voice. Inverts correctly in dark themes.
cta-card-floatA raised card straddling the seam between two surfaces — the ask reads as an object placed on the page. The block's only shadow.
cta-double-optionTwo side-by-side doors with their own buttons — brief a project, or just ask a question. The lead panel is an inverted field, the second a hairline frame.
cta-splitStatement at the inline start, actions at the inline end, framed top and bottom by hairlines. The mid-page ask that does not shout.
cta-statement-bigOne oversized closing sentence set like a poster, with a bare arrow link underneath instead of a button. Editorial, agency and portfolio endings.

faq 5

faq-accordionThe standard FAQ: hairline rows that open one at a time via the runtime's [data-accordion] hook. Narrow measure, display-face questions, drawn plus/minus mark.
faq-accordion-splitHeadline and lede in a sticky column inline-start, the accordion inline-end. Use when the FAQ also has to carry a message, not just answers.
faq-cardsEach question and answer on its own card in an intrinsic grid. The most visual FAQ — use it when the section needs weight next to a plain neighbour.
faq-inline-contactA short FAQ that closes with a quiet hand-off to the contact form — the last objection is always "what if my question isn't here?".
faq-two-colQuestions and answers as a plain two-column list — everything readable at once, no interaction. Right when the answers are short and people scan for one fact.

features 16

feat-accordionFeatures as an accordion beside a sticky headline. Uses the runtime [data-accordion] hook; set open:true on one item so the section is never a page of closed doors.
feat-alternating-mediaAlternating image/text bands in a Z rhythm. Each item owns its own image slot (feat-1, feat-2 …) so the imagery stage can give every band a distinct photo.
feat-bentoAsymmetric bento field: one tinted hero tile plus smaller satellites, self-balancing for 3-5 items and collapsing to one column on phones.
feat-cards-tintedBorderless cards on a tinted surface ladder, alternating two tint strengths of the brand hue. Warm, calm, shadow-free — for clinics, schools and service brands.
feat-checklist-splitA sticky promise column beside a ticked proof list. The persuasion block: headline and CTA on one side, everything that is included on the other.
feat-compare-twoTwo panels side by side — the situation today and the situation with you. Item 1 is the grey status quo, item 2 carries the tint, the accent edge and the tick.
feat-grid-3Three bordered cards per row under a start-anchored headline. The default feature grid — quiet, dense enough for real copy, skinnable into Stripe cards or Linear panels.
feat-grid-4Four compact cards per row under a split head rule. Dense capability grid for products with many small features — Linear-style tiers, short copy.
feat-icon-listTwo or three columns of icon + title + text. Marks are drawn CSS shapes chosen per item from a fixed vocabulary — never an empty box, never an external icon font.
feat-list-rowsFull-width rows split by hairlines — title inline-start, explanation opposite. Editorial, boxless, holds up to eight entries without visual noise.
feat-marquee-tagsA short intro line above a scrolling band of capability chips. The breather between two heavy sections — proves range without asking anyone to read a list.
feat-numbered-gridCards with a large watermark numeral in the corner. Use when the features are a countable set — packages, pillars, guarantees — rather than a loose list.
feat-pill-cloudA centred headline inside a cloud of capability pills at mixed sizes. Shows breadth in one glance where a grid would need twenty cards.
feat-statement-gridDisplay-size statements under heavy rules — no cards, no icons. For agencies, architects and photographers where the claim is the design.
feat-table-simpleA real specification or comparison table: mono column heads, hairline rows, and its own scroll box so a wide table never drags the page sideways on a phone.
feat-tabsTabbed feature panels on an underlined tablist. Uses the runtime [data-tabs] hook; meta is the tab label, title and text fill the panel. Mark one item active:true.

footer 6

footer-big-wordmarkThe studio name set at viewport scale as a printed band, with small utility links and the copyright beneath a hairline. An agency sign-off.
footer-columnsThe sitemap footer: a brand column with a blurb beside three or four link columns, then a hairline and the fine print row.
footer-contact-cardAddress, hours and phone as a label/value ledger inside one tinted card, with the sitemap kept quieter beside it. For places customers visit or call.
footer-dark-bandAn inverted ink band closing the page: brand blurb, three link columns and fine print, all lit from --bg so it flips correctly in dark themes.
footer-minimalOne wrapping row — wordmark, a handful of links, the copyright line. The closing signature for one-page and portfolio sites.
footer-newsletterA fully labelled signup capsule (field fused to its button) beside two or three link columns, closed by a fine print row. Wired to the runtime lead handler.

hero 16

hero-centeredCentred statement stack — eyebrow, headline, lede, CTA pair — over an optional wide stage image. The default launch hero: symmetric, calm, works for any trade.
hero-collageCentred statement with three tilted photo crops pinned around it. Warm, human energy — for hospitality, education, marketplaces and anything sold by atmosphere.
hero-cutout-overlapA colossal statement crossed by a vertical portrait plate that bleeds past the section edges. Gallery energy — fashion, photography, interiors, craft.
hero-editorial-serifA magazine opening: masthead rule, oversized headline, standfirst in a narrow measure and a byline gutter. No image — the typography is the picture.
hero-form-inlineHeadline, subline and a single welded email capsule — field joined to button. The waiting-list / quote-request hero where the form is the composition.
hero-fullbleed-photoFull-viewport photograph with a scrimmed centred statement over it. Cinematic and aspirational — for travel, transport, hospitality, property and any brand whose picture is the pitch.
hero-gradient-ribbonA luminous diagonal gradient band mixed from --accent and --accent2 behind a light-weight headline, with an optional framed product card floating over it. The platform/fintech hero.
hero-highlight-blockThe headline sits inside a filled accent slab that shrink-wraps its own lines — colour used as container. Theatrical and blocky; one per page.
hero-monumentViewport-scale display type as architecture: a crushed-tracking headline over a hairline base line carrying one small square image. For studios, builders and any brand confident enough to say four words.
hero-panel-cardThe whole hero inside one cushioned panel floating on an accent-tinted field. Friendly and soft-edged — banking, health, family services.
hero-poster-typeThe headline as the entire composition — a full-sheet poster with a hairline head, a hairline foot and one quiet link. For studios, festivals and anyone whose voice is the product.
hero-product-frameStart-anchored text beside a browser-framed product shot that bleeds past the container. The SaaS/tool hero — the app is the imagery.
hero-splitText column beside a media block. The workhorse hero — reads as product, agency or service depending only on the skin.
hero-split-reverseFull-height portrait plate on the start edge, words in a quiet measure on the end edge. The mirror of hero-split with an editorial, edge-to-edge rhythm.
hero-stat-bandClaim above, evidence below: headline and lede over a hairline-ruled band of proof numbers. For installers, manufacturers and services that win on track record.
hero-two-column-textPure typography: headline on the start column, two paragraphs and the action on the end column, hung from a single hairline. No image at all — for law, consultancy, accountancy and B2B services.

nav 8

nav-bordered-barFlat hairline-ruled bar, dense and technical: utility-face links at the small step, no shadow, no rounding. Developer-tool and SaaS register.
nav-center-linksWordmark at the start, links optically centred, CTA at the end. The balanced editorial header; collapses to a centred full-width sheet on phones.
nav-floating-pillA capsule of chrome floating inset from the page edge, with the three-layer floating-chrome elevation. Consumer, friendly, Airbnb/Revolut temperament.
nav-inlineWordmark at the inline start, link row and one CTA at the end. The default header — sticky, hairline-ruled, with a drawn hamburger sheet under 768px.
nav-minimalWordmark, an optional standing line and one quiet action — no menu at all. For portfolios, editorial and single-page sites that navigate by scrolling.
nav-split-ctaLinks beside the wordmark, two actions fenced off at the end behind a hairline — a ghost for returning users and one filled button for new ones.
nav-tall-wordmarkAn oversized wordmark masthead above a thin uppercase link row, split by a hairline. Agency, gallery and studio hierarchy: the name first, the menu second.
nav-utility-barA slim inverted announcement strip riding above a normal nav row — one block, two rows. For launches, shipping notices and seasonal offers.

pricing 7

price-package-splitOne package explained in full at the inline start, the price and the button parked at the inline end. Use when the offer needs arguing before the number lands.
price-quote-bandA no-prices pricing section: a free-quote band with two or three reassurances and one CTA. Use when the business quotes every job (bâtiment, événementiel, transport).
price-service-listA numbered service menu: name, one line of explanation, price or 'Sur devis' at the inline end, hairlines between rows. Reads well from three to ten services.
price-single-cardOne offer, one number, one CTA — a split card with a tinted price panel and the list of what is included beside it. Use when the business sells a single package.
price-tableA compact service/price table — real tabular markup, scrolls inside its own region on phones. Best for trades that quote many small line items.
price-tiers-3Tier cards side by side, one of them emphasised by data (featured + badge). Prices are free text, so a tier may read '45 000 DA' or 'Sur devis'.
price-tiers-flatThe same tier content as price-tiers-3 but as full-width hairline rows instead of cards — calmer, editorial, good when the page already has many cards.

process 6

proc-big-numeralsOversized outlined numerals beside each step, hairline-separated. The editorial process block — for studios, architects and brands with restraint.
proc-cards-rowSteps as a row of cards, each opening with its numeral in the meta line and an accent rule across the top. The compact process block for busy pages.
proc-checklistAn ordered checklist of what the client has to prepare or expect, closed by a tinted CTA plank. The practical, low-ceremony process block.
proc-numbered-railVertical rail of numbered steps beside a sticky headline. The default process block — the connecting line is a logical border, so it mirrors under rtl.
proc-timeline-horizontalSteps laid along a horizontal track with markers on the line; stands up into a vertical rail below 768px. Best for three to five short stages.
proc-zigzagSteps alternating either side of a centre line, one per row, with a connector dot facing the middle. Collapses to a single rail on phones.

showcase 12

show-before-afterExactly two labelled panels side by side — before and after — sharing one crop, one size and one rule between them.
show-fullbleed-bandOne edge-to-edge photographic band with an optional caption panel in the corner. A deliberate pause between two text-heavy sections.
show-grid-2Two large project tiles per row with a hairline-anchored museum label beneath each. The default portfolio grid for studios, photographers and architects.
show-grid-3Three flat gallery tiles per row with title and subtitle stacked beneath. Denser than show-grid-2 — for catalogues, services shown as pictures, and larger portfolios.
show-list-rowsText-led project rows ruled by hairlines: number, title, meta, a small thumbnail and an arrow. An index of work rather than a gallery of it.
show-logo-wallA hairline grid of client name plates set in type. No logo files are borrowed, so it is safe to ship on day one and still reads as a client list.
show-masonryA staggered contact-sheet wall: tiles cycle through four aspect ratios so the columns fall out of step. For photographers and image-heavy studios.
show-overlap-pairExactly two pictures at different sizes, the smaller cutting into the larger, with the caption tucked under the pair. One composed moment instead of a grid.
show-scrollerOne snapping horizontal row of photo-led cards with paired prev/next arrows beside the heading. Shows many projects without eating a screen of height.
show-single-frameOne hero-scale photograph, matted in a frame, with its title and description in the column beside it. For the single project worth a whole section.
show-split-detailA tall photograph inline-start with a hairline-ruled specification list inline-end. For property listings, product detail, build specs and project fact sheets.
show-tile-captionsPortrait gallery tiles with the label inside the tile, on a scrim panel pinned to the bottom edge. Reads as a catalogue or a lookbook.

social 9

soc-badge-rowA row of trust plates: a drawn mark from the .icon primitive beside a short promise. No borrowed certification logos, so it is safe on day one.
soc-case-highlightOne featured case study: picture, headline, two or three ruled results and the link to the full write-up.
soc-marquee-quotesClient sentences drifting across the page in a masked marquee strip. A low-commitment proof band between two heavier sections.
soc-quote-largeOne oversized pull quote with attribution and an optional portrait. Use where a single sentence carries more weight than three cards.
soc-quote-split-photoA quote in the reading column with the speaker's portrait in the far column. The most personal of the proof blocks.
soc-review-cardsCompact review cards with a drawn star row whose fill is set per item. Denser and more transactional than the testimonial cards.
soc-stats-cardsTwo to four stat cards: a counted figure, a label, and the sentence that keeps the figure honest.
soc-stats-rowA ruled band of big numbers with utility labels, counting up on first sight. The cheapest credible proof when there are no quotes yet.
soc-testimonial-3Three quote cards with a drawn quote mark and a ruled-off attribution. The default proof section for services and studios.

utility 12

util-announcement-barA slim strip for one short message and an optional inline link — delivery news, opening hours during Ramadan, a promotion. Sits above the nav.
util-badge-rowSmall certification or membership plates — a drawn mark plus a label and an optional reference number. Use for agréments, registre de commerce, memberships.
util-cta-inline-noteOne line of text with a quiet inline link — a mid-page nudge between two sections, far lighter than a full CTA block.
util-divider-statementA single sentence framed by hairlines above and below — a deliberate pause between two dense sections that still carries a message.
util-hours-tableOpening hours as a labelled two-column list with dotted leaders. Mark a day closed and its line goes quiet instead of disappearing.
util-lang-noteA quiet strip stating which languages the business serves, with the languages as pills. Genuinely useful on Algerian sites (AR / FR / EN).
util-location-cardAn address card with a drawn pin, the landmark that actually helps people find the place, a directions link and an optional map image slot. Never an embedded map.
util-logo-platesPartner or client names set as uniform type plates — no external logo files, so the row is always crisp, always on-brand and never a broken image.
util-section-headerA standalone section header — eyebrow, h2, lede, optional quiet link — placed directly before a block that has no title of its own. Alignment is a skin decision.
util-spacer-bandA tinted breathing band that separates two dense sections. It carries a hairline and a drawn diamond so it always reads as a designed pause, plus an optional single word as a chapter mark.
util-stat-bandA band of two to four big numbers with labels, counting up when seen. Use only for figures the business can actually stand behind.
util-trust-stripA row of short reassurances with drawn marks — delivery, payment, guarantee, support. Connective tissue between a hero and the first real section.