R RenDS v0.13.0

GitHub Get started

Blocks

Page blocks

Ready-to-use sections for composing consistent marketing and application pages. Start with one block or combine several into a complete template.

Responsive navigation patterns for simple headers, drawers, and structured mega menus.

Navbar Drawer

Compact brand, CTA, and drawer navigation built with a real nav landmark, RenDS buttons, and the sheet composite.

Navbar Mega Menu

One navigation tree with a native mega-menu disclosure, grouped destinations, featured articles, and progressive enhancement on top of ren-nav.

Navbar Mega Menu Featured

Responsive mega-menu navigation with grouped destinations, one featured article, desktop hover support, and keyboard-safe progressive enhancement.

Navbar Mega Menu Icons

Four icon destination groups, a compact action footer, one responsive navigation tree, and accessible hover, click, and keyboard behavior.

Navbar Mega Menu Link Rail

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Mega Menu Footer

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Mega Menu Card Grid

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Logo-Left Menu-Right Dropdown

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Logo-Left Menu-Right Grouped

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Logo-Left Menu-Center Dropdown

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Floating Logo-Left Menu-Right Actions

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Floating Bottom Logo-Left Menu Actions

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Logo-Left Action Overlay Menu

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Logo-Left Fullscreen Menu Social

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Logo CTA Overlay Grid

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Logo-Left Center-Links Site-Panel

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Logo-Left Center Links Overlay Panel

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Logo-Center Links Fullscreen Featured

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Sticky Logo Center Dropdown Fullscreen Contact

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Mega Menu Product Intro

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Mega Menu Product Rail

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Mega Menu Categories Promo

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Mega Menu Category Promo Panel

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Mega Menu Category Collections

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Mega Menu Topic Collections

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Mega Menu Overlay Collections

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Mega Menu Categories Products

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Logo CTA Right Sheet Contact

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Navbar Logo CTA Left Drawer

Ren10 navigation block with one responsive tree, keyboard-safe interactions, accessible focus behavior, and progressive enhancement.

Headers

Thirty responsive hero compositions for introducing products, services, and campaigns.

Split copy, dual CTA and media

Split copy and media hero with two clear calls to action.

Split email signup with media

Email capture hero with a responsive peer media column.

Text-left video lightbox

Two-action hero with a keyboard-safe video lightbox.

Split email signup with video lightbox

Email signup and accessible video disclosure in one split hero.

Fullscreen background with dual CTA

Full-viewport background hero with two contrasting actions.

Fullscreen Email Capture Hero

Full-viewport background hero with an accessible email capture form.

Fullscreen Background Video Hero

Full-viewport background video hero with two clear calls to action.

Fullscreen Video Email Hero

Full-viewport video hero with a progressively enhanced email form.

Fullscreen Media and Copy Band Hero

Flexible cover media above a responsive copy band with two actions.

Cover Image Email Hero

Cover image hero with a split lower band and accessible email capture.

Fullscreen Video and Copy Band Hero

Full-viewport video hero above a responsive copy band with two actions.

Video Email Split Hero

Video hero with a split lower band and accessible email capture.

Lightbox Media and Dual CTA Hero

Video lightbox above a responsive copy band with two clear actions.

Lightbox and Email Split Band Hero

Video lightbox above a split lower band with accessible email capture.

Split Copy Landscape Hero

Split copy hero with two actions and a responsive landscape image.

Split Email Landscape Hero

Split email-capture hero with a responsive landscape image.

Landscape Lightbox Hero

Split copy hero with two actions and an accessible landscape lightbox.

Split Email and Video Lightbox Hero

Split email-capture hero above an accessible landscape lightbox.

Image Left Copy Hero

Image-first split hero with supporting copy and two actions.

Email Copy and Image Hero

Image-first split hero with email capture, legal copy, and status feedback.

Split Video Lightbox and Copy Hero

Video-first split hero with an accessible lightbox and two clear actions.

Video Lightbox and Email Hero

Video-first split hero with an accessible lightbox and email capture.

Centered Dual-Action Hero

Centered content-height hero with two clear calls to action.

Centered Email Capture Hero

Centered content-height hero with accessible email capture.

Centered Search Hero

Centered content-height hero with native, progressively enhanced search.

Centered Dual-Action Landscape Hero

Centered copy and dual actions followed by a responsive landscape image.

Centered Email and Landscape Hero

Centered email capture followed by a responsive landscape image.

Centered Landscape Lightbox Hero

Centered copy and dual actions followed by an accessible landscape lightbox.

Centered Email and Landscape Lightbox Hero

Centered email capture followed by an accessible landscape lightbox.

Fullscreen Background Centered Dual CTA Hero

Centered copy and dual actions over an immersive background image.

Calls to action

Sixty focused conversion sections for actions, email capture, and campaign destinations.

Split Image Dual-Action CTA

Responsive split copy, two clear destinations, and a real editorial image.

Split Image Email Capture CTA

Responsive split copy, accessible email capture, and a real editorial image.

Background Image Dual-Action CTA

Contrast-safe conversion copy and two destinations layered over photography.

Background Image Email Capture CTA

Contrast-safe conversion copy and accessible email capture over photography.

Contrast Dual-Action CTA

A focused high-contrast conversion band with two responsive actions.

Contrast Email Capture CTA

A focused high-contrast conversion band with accessible email capture.

Split Copy Email Capture CTA

A two-column message and labelled email form with a clean conversion rhythm.

Background Image Split Actions CTA

Message and destinations separated across a real photographic backdrop.

Background Image Email Aside CTA

A photographic conversion band pairing clear copy with accessible email capture.

Contrast Split Actions CTA

A compact high-contrast band separating its copy and two actions.

Contrast Email Aside CTA

A high-contrast conversion band balancing clear copy with email capture.

Split Heading Copy Actions CTA

An oversized statement balanced by supporting copy and destinations.

Split Heading Email Form CTA

A large statement balanced by supporting copy and accessible email capture.

Background Image Heading Actions CTA

A split message and two destinations layered over real photography.

Background Image Heading Email CTA

An image-led split statement with contrast-safe email capture.

Contrast Heading Actions CTA

A high-contrast statement paired with supporting copy and actions.

Contrast Heading Email CTA

A high-contrast split statement with labelled email capture.

Editorial Stacked Actions CTA

A spacious one-column statement with supporting copy and destinations.

Left Actions CTA

A concise one-column message with two responsive destinations.

Left Email Capture CTA

A concise one-column message with accessible email capture.

Split Copy Actions Landscape CTA

Two-column copy and actions above a real panoramic photograph.

Split Copy Email Landscape CTA

Balanced copy and email capture above a wide real-world image.

Stacked Actions Landscape CTA

A spacious statement and actions leading into panoramic photography.

Stacked Email Landscape CTA

A long-form statement, accessible email form, and panoramic image.

Centered Actions CTA

Centered conversion copy with a balanced pair of destinations.

Centered Email Capture CTA

Centered conversion copy with a labelled email form.

Background Photo Centered Actions CTA

Centered copy and actions layered over real botanical photography.

Background Photo Centered Email CTA

Centered email capture layered over real coastal photography.

Contrast Centered Actions CTA

A high-contrast centered message with two responsive destinations.

Contrast Centered Email CTA

A high-contrast centered message with accessible email capture.

Centered Actions Landscape CTA

Centered conversion copy and actions followed by panoramic photography.

Centered Email Landscape CTA

Centered email capture followed by a wide real-world image.

Centered Actions Logo Rail CTA

Centered conversion copy and actions supported by a responsive logo rail.

Centered Email Logo Rail CTA

Centered email capture supported by a responsive customer-mark rail.

Dual Cards Left CTA

Two equal conversion paths in a fluid, left-aligned CSS Grid.

Dual Cards Centered CTA

Two equal conversion paths in a fluid, centered CSS Grid.

Centered Hover Link Stack CTA

Four centered destinations reveal real photography on hover and keyboard focus.

Numbered Hover Link List CTA

A numbered destination list with strong dividers and real image previews.

Split Card Actions CTA

A bordered split conversion card with two actions and real photography.

Split Card Email CTA

A bordered split card pairing accessible email capture with photography.

Background Banner Actions CTA

A compact conversion banner with two actions over real photography.

Background Banner Email CTA

A compact email capture banner layered over real coastal photography.

Contrast Band Actions CTA

A compact high-contrast band with supporting copy and two clear destinations.

Contrast Band Email CTA

A compact high-contrast band with accessible email capture.

Outlined Split Band Actions CTA

A bordered responsive band separating conversion copy and two actions.

Outlined Split Band Email CTA

A bordered responsive band pairing concise copy with email capture.

Photo Split Band Actions CTA

A compact split conversion band layered over real editorial photography.

Photo Split Band Email CTA

A compact photographic band with labeled, responsive email capture.

Contrast Inline Actions CTA

A high-contrast responsive band separating concise copy and two actions.

CTA 50

Contrast Split Email CTA

A high-contrast split band pairing focused copy with accessible email capture.

CTA 51

Outlined Centered Actions CTA

A restrained outlined container with centered copy and two clear actions.

CTA 52

Outlined Centered Email CTA

A centered outlined conversion block with responsive email capture.

CTA 53

Photo Centered Actions CTA

A centered action block layered over real architectural photography.

CTA 54

Photo Centered Email CTA

A centered email conversion block over real coastal photography.

CTA 55

Video Background Centered Actions CTA

A centered action block over real botanical motion with accessible playback control.

CTA 56

Video Background Centered Email CTA

Accessible email capture layered over real botanical motion.

CTA 57

Centered Focus Actions CTA

A calm centered conversion section with two responsive destinations.

CTA 58

Centered Focus Email CTA

A calm centered conversion section with labeled email capture.

CTA 59

Split Photo Actions CTA

A two-column conversion block pairing actions with real studio photography.

CTA 60

Split Photo Email CTA

A two-column email conversion block paired with real coastal photography.

Features

Product-value sections combining clear hierarchy, real photography, and responsive Grid compositions.

Feature 1

Split Copy Image Feature

Structured value copy and three benefits paired with real studio photography.

Feature 2

Split Image Copy Feature

A reverse split composition leading with real coastal photography.

Feature 3

Centered Icon Grid Feature

A centered introduction followed by three equal responsive benefit cards.

Feature 4

Split Heading Feature Grid

An editorial split heading above a structured two-by-two capability grid.

Feature 5

Media Top Feature Columns

A wide real-world photograph followed by three concise product benefits.

Feature 6

Staggered Media Feature Grid

A compact bento grid balancing contrast, supporting copy, and real photography.

Feature 7

Split Image Metrics Feature

Product copy and two proof points paired with real botanical photography.

Feature 8

Process Steps Feature

A semantic four-step process that adapts from four columns to one.

Feature 9

Sidebar Checklist Feature

A focused introduction beside four compact capability cards.

Dual Media Stories Feature

Two equal product stories paired with real landscape photography.

Contrast Columns Feature

A high-contrast statement followed by three responsive value columns.

Gallery Metrics Feature

Two real photographs and compact metrics in an editorial CSS Grid.

Horizontal Capability Rail Feature

A split heading followed by four responsive capability columns.

Photo Quote Feature

Real architectural photography paired with a quote and proof points.

Layered Media Cards Feature

A compact bento grid balancing photographs and value cards.

Comparison Grid Feature

A semantic comparison of ad hoc work and a shared product system.

Six Tile Grid Feature

Six compact capability tiles in a dense responsive CSS Grid.

Photo Overlay Panel Feature

A landscape photograph and readable surface panel layered with CSS Grid.

Alternating Story Rows Feature

Three editorial rows alternate real photography and focused product value.

Indexed Detail Grid Feature

A stable introduction paired with three structured indexed detail cards.

Image Stat Stack Feature

Coastal photography paired with concise copy and three proof points.

Contrast Metrics Band Feature

A high-contrast statement followed by four responsive system metrics.

Editorial Triptych Feature

Two real photographs balance a high-contrast statement in three columns.

Photo Disclosure List Feature

Real architecture paired with accessible native feature disclosures.

Tabbed Media Showcase Feature

Accessible tabs switch between three real-world product stories.

Timeline Media Feature

Portrait studio photography anchors a structured four-stage timeline.

Capability Mosaic Feature

Five capability cards use deliberate one-, two-, and three-column spans.

Split Contrast Checklist Feature

A dark product statement and light checklist share one responsive Grid.

Architecture Layers Feature

Three semantic layers explain foundation, components, and patterns.

Gallery Quote Rail Feature

Two real photographs frame a compact product principle.

Panorama Capability Deck Feature

A broad architectural photograph introduces three concise capability cards.

Split Statement Metrics Feature

An accent statement shares a balanced split composition with four metrics.

Image Disclosure Aside Feature

Portrait photography anchors three accessible native disclosures.

Product Pillars Feature

Three equal pillars connect system responsibilities to concrete outcomes.

Media Evidence Grid Feature

Photography and measured proof alternate in an editorial two-column Grid.

Adoption Sequence Feature

A photographic introduction sits beside four practical adoption stages.

Editorial Chapter Index Feature

A stable introduction orients three structured product chapters.

Media Story Mosaic Feature

Two photographs and two narratives form an asymmetric twelve-column mosaic.

Outcome Comparison Feature

Four responsive rows contrast fragmented work with shared outcomes.

Centered Delivery Steps Feature

A centered introduction leads into four equal product delivery stages.

Quote Proof Split Feature

A dark photographic story shares a balanced split with three proof metrics.

Centered Media Matrix Feature

A central portrait image separates two pairs of capability cards.

Metric Chapters Feature

Three product narratives pair directly with prominent outcome metrics.

Twin Media Briefs Feature

Two photographic briefs combine focused copy and practical outcome lists.

Capability Ledger Feature

Six compact rows form a dense alternative to a conventional card grid.

Contrast Media Bento Feature

A tall photograph balances two contrasting product-value surfaces.

Quote Evidence Band Feature

A centered customer quote leads into three equal proof columns.

Image Process Ribbon Feature

A panoramic photograph introduces four connected delivery stages.

Photographic Story Rail Feature

Three real photographs introduce related product stories.

Capability Checkerboard Feature

Four high-contrast capability surfaces form a responsive checkerboard.

Image Metric Aside Feature

Three measured outcomes sit beside real portrait photography.

Indexed Story Stack Feature

Three indexed rows connect narratives with concise proof points.

Centered Proof Grid Feature

Six compact proof cards follow a centered introduction.

Asymmetric Media Statement Feature

A wide photograph balances a dark statement and two supporting cards.

Media Annotation Board Feature

A dominant photograph is explained by four compact annotations.

Alternating Story Pairs Feature

Three editorial rows alternate focused copy and real photography.

Signal Comparison Grid Feature

Six cards compare fragmented signals with system-level outcomes.

Quote Metric Mosaic Feature

A large testimonial balances four compact outcome cards.

Capability Sequence Band Feature

Five connected capability stages form a continuous horizontal band.

Dual Photo Manifesto Feature

Two differently proportioned photographs frame a product manifesto.

Editorial Side Notes Feature

A wide photograph pairs with three compact editorial notes.

Metric Timeline Feature

Four measured stages form a responsive maturity timeline.

Contrast Story Triptych Feature

A principle card, photograph, and outcome card form a triptych.

Photo Quote Ledger Feature

Portrait photography balances a quote and evidence ledger.

Capability Comparison Matrix Feature

Three rows compare local work with shared system outcomes.

Panorama Proof Footer Feature

A wide landscape photograph leads into four proof cards.

Modular Spec Sheet Feature

A dark summary panel sits beside four capability rows.

Staggered Photo Notes Feature

Three real photographs descend across an editorial gallery.

Layered Value Stack Feature

Four increasingly prominent layers explain compounding value.

Contrast Metric Spotlight Feature

A dark primary metric balances four supporting proof cards.

Editorial Quote Columns Feature

A large testimonial sits beside two product stories.

Image Capability Dock Feature

A wide photograph anchors five compact capability cards.

Command Center Overview Feature

A large operating principle balances four system health metrics.

Dual Image Evidence Feature

Two photographs balance three compact proof cards.

Indexed Capability Rail Feature

Six connected capability cards form an indexed rail.

Dark Photo Manifesto Feature

A dark manifesto balances photography and proof cards.

Centered Process Satellites Feature

A centered process core is surrounded by four responsibilities.

Proof Staircase Feature

Four increasingly prominent proof steps form a staircase.

Evidence Photo Quadrants Feature

An editorial photograph anchors four compact proof quadrants.

Process Evidence Table Feature

Delivery stages align actions with visible evidence.

Contrast Numbered Bento Feature

A high-contrast lead card defines an asymmetric numbered Grid.

Image Statement Strip Feature

Panoramic media leads into a structured value strip.

Centered Metric Constellation Feature

One outcome sits at the center of four supporting signals.

Dual Column Capability Log Feature

Parallel logs compare foundations and delivery guarantees.

Editorial Capability Directory Feature

A strong statement leads into five indexed capability rows.

Photo Metric Scoreboard Feature

Editorial photography balances a measurable product scoreboard.

Alternating Evidence Bands Feature

Three bands connect practices with effects and signals.

Dual Story Windows Feature

Two editorial windows separate foundation and delivery stories.

Contrast Outcome Ledger Feature

A dark spotlight anchors four supporting signals.

Disclosure Media Workshop Feature

Native disclosures sit beside a tall workshop image.

Annotated Image Registry Feature

A dominant editorial image sits beside four indexed notes.

Definition Evidence Ledger Feature

Capabilities connect plain-language definitions with proof.

Contrast Photo Quote Feature

A dark editorial quote balances photography and metrics.

Process Handoff Map Feature

Four stages expose responsibilities and exit signals.

Editorial Image Chapters Feature

Two alternating chapters pair real photography with product stories.

Outcome Comparison Board Feature

A three-column board traces friction through Ren10 to outcomes.

Editorial Focus Rail Feature

An indexed rail supports one larger image-led focus story.

Metric Sentence Columns Feature

Large measures pair with full narrative product sentences.

Contrast Architecture Layers Feature

Four inset layers explain the system architecture.

Centered Operating Principle Feature

A central principle is translated through four supporting pillars.

Panorama Evidence Ledger Feature

A wide panorama leads into four evidence rows.

Capability Decision Tree Feature

One product question branches into four practical outcomes.

Capability Taxonomy Index Feature

A compact taxonomy supports four fuller definitions.

Panorama Proof Rail Feature

A panoramic image anchors three raised proof cards.

Contrast Maturity Ladder Feature

Five dark stages form an ascending maturity ladder.

Split Metric Transcript Feature

A dominant metric is explained through four transcript rows.

Twin Operating Models Feature

Foundation and delivery models share a comparable rhythm.

Operating Glossary Disclosures Feature

Four native disclosures explain the operating language.

Editorial Chapter Roster Feature

Six ordered rows create a continuous editorial roster.

Photo Quote Footnotes Feature

A photograph and large quote lead into three footnotes.

Contrast Evidence Columns Feature

Four ascending dark columns connect measures to evidence.

Delivery Compass Feature

Four responsibilities orient one central delivery outcome.

Capability Scorecard Feature

Capabilities align with observable signals and measures.

Definition Practice Pairs Feature

Three paired rows connect definitions with product actions.

Image Marginalia Feature

A central editorial image is framed by four marginal notes.

Contrast Standards Ledger Feature

Five dark rows connect standards with visible evidence.

Capability Cascade Feature

Four staggered cards show compounding capabilities.

Metric Narrative Quartet Feature

Four measures balance outcome narratives in a quartet.

Dual Photo Evidence Strip Feature

Two real photographs lead into three proof cells.

System Operating Matrix Feature

One core principle anchors five system responsibilities.

FAQs

Support sections using native disclosures, responsive Grid compositions, and consistent spacing.

FAQ 1

Centered Accordion FAQ

A centered introduction and focused single-open disclosure list.

FAQ 2

Split Heading Accordion FAQ

Orientation copy and implementation answers share a responsive two-column Grid.

FAQ 3

Two Column Groups FAQ

Independent disclosure groups create a denser desktop support section.

FAQ 4

Category Cards FAQ

Separate card surfaces organize product and delivery questions.

FAQ 5

Contrast Split FAQ

A high-contrast split layout gives technical answers stronger presence.

FAQ 6

Support Aside FAQ

A visible support destination sits beside the accessible FAQ list.

FAQ 7

Indexed Editorial FAQ

Numbered disclosure rows create a clear reading order for longer answer sets.

FAQ 8

Proof Split FAQ

Product signals and accessible answers share a balanced responsive Grid.

FAQ 9

Accent Panel FAQ

A strong orientation panel sits beside a neutral disclosure column.

FAQ 10

Support Band FAQ

A focused answer list ends with one calm documentation action.

FAQ 11

Multiple Open FAQ

Related system layers remain open when readers need to compare them.

FAQ 12

Category Directory FAQ

Three compact categories form a responsive support directory.

Testimonials

Customer proof sections combining semantic quotations, real photography, and clear attribution.

Centered Statement Testimonial

One high-confidence quote receives a spacious centered composition.

Split Photo Story Testimonial

A real studio photograph and customer story share a responsive Grid.

Three Card Grid Testimonial

Three concise customer perspectives form a balanced proof row.

Contrast Metrics Testimonial

A high-contrast story connects customer language with measurable outcomes.

Editorial Photo Case Testimonial

A landscape photograph gives a spacious customer case real context.

Editorial Mosaic Testimonial

One lead voice and two supporting perspectives create an asymmetric Grid.

Logo Rail Statement Testimonial

A customer rail establishes breadth before one centered proof story.

Dual Perspectives Testimonial

Design and engineering describe the same system from complementary angles.

Photo Overlay Testimonial

A real landscape photograph supports a high-contrast customer statement.

Customer Journey Testimonial

One quote connects directly to three observable adoption stages.

Proof Aside Testimonial

A large customer voice balances four compact evidence cells.

Asymmetric Wall Testimonial

One dominant quote and three supporting voices create a varied proof wall.

Responsive closing sections with clear navigation landmarks, useful hierarchy, and accessible conversion paths.

Footer 1

Compact Brand Links Footer

A calm two-zone footer for smaller sites and essential destinations.

Footer 2

Multi Column Directory Footer

Brand context and three clearly labeled navigation groups.

Footer 3

Newsletter Directory Footer

Accessible subscription capture followed by compact utilities.

Footer 4

Contrast Statement Footer

A high-confidence statement with two clearly contrasted actions.

Footer 5

Split Contact Footer

Direct support and partnership routes beside the brand statement.

Footer 6

Product Sitemap Footer

A complete information architecture with stable group labels.

Footer 7

Editorial Wordmark Footer

An expressive identity balanced by a restrained directory.

Footer 8

Social Proof Footer

A proof statement and customer rail above compact utilities.

Footer 9

CTA Band Footer

A distinct conversion band and concise four-column directory.

Footer 10

Legal Directory Footer

Policies, agreements, and regional information organized clearly.

Footer 11

Minimal Centered Footer

A focused identity and four essential destinations.

Footer 12

Product Ecosystem Footer

Product families and developer resources in high contrast.

Application Shells

Responsive product frames for dashboards, workspaces, data, planning, and focused operational tasks.

Application shell 1

Sidebar Dashboard Application Shell

Persistent navigation and a fluid metrics workspace.

Application shell 2

Topbar Workspace Application Shell

A horizontal product frame with lightweight project navigation.

Application shell 3

Compact Rail Analytics Application Shell

An accessible icon rail leaves more room for reporting.

Application shell 4

Split Pane Inbox Application Shell

A message index and readable detail pane without clipping.

Application shell 5

Command Center Application Shell

Search, navigation, and recent destinations in one focused surface.

Application shell 6

Content Studio Application Shell

A document outline and centered authoring canvas.

Application shell 7

Project Board Application Shell

Three workflow columns with stable task alignment.

Application shell 8

Settings Application Shell

Persistent settings navigation beside a labeled form.

Application shell 9

Data Explorer Application Shell

A semantic table contained safely on narrow screens.

Application shell 10

Calendar Planner Application Shell

A weekly schedule that becomes a readable mobile Grid.

Application shell 11

Service Operations Application Shell

High-contrast status reporting with explicit language.

Application shell 12

Team Directory Application Shell

Search and profile cards in a flexible directory Grid.

Contact

Accessible contact forms, direct support routes, and location directories composed with responsive Ren10 Grid primitives.

Contact 1

Split Form Details Contact

Direct contact details remain visible beside a complete inquiry form.

Contact 2

Centered Form Contact

A focused centered form keeps the complete inquiry path in one column.

Contact 3

Details Cards Contact

Three clear cards route projects, support requests, and direct calls.

Contact 4

Photo Form Contact

Real studio photography and an accessible form share a responsive Grid.

Contact 5

Office Directory Contact

Three regional offices preserve consistent contact hierarchy.

Contact 6

Support Routes Contact

Support, sales, and documentation destinations stay explicit.

Contact 7

Contrast Form Contact

A high-contrast invitation pairs with a clear raised inquiry form.

Contact 8

Office Photo Details Contact

Real photography anchors practical office and appointment details.

Contact 9

Sales Support Split Contact

Sales and support routes stay distinct, explicit, and actionable.

Minimal Direct Contact

A concise statement leads directly to email, phone, and availability.

Regional Directory Contact

Four regional teams share one consistent information hierarchy.

Hub Form Routes Contact

A complete form and direct routes create one flexible contact hub.

Pricing

Accessible plan comparisons, calculators, programs, and enterprise offers with transparent scope and terms.

Pricing 1

Three Tier Cards Pricing

Three comparable plans with an explicit recommendation.

Pricing 2

Comparison Table Pricing

A semantic feature table contained on narrow screens.

Pricing 3

Featured Plan Split Pricing

A focused promise beside one recommended plan.

Pricing 4

Usage Calculator Pricing

Visible inputs explain how usage shapes the estimate.

Pricing 5

Billing Period Toggle Pricing

Native radio controls set monthly or annual billing.

Pricing 6

Enterprise Split Pricing

A high-contrast enterprise promise and concrete plan card.

Pricing 7

Compact Plan Rows Pricing

Fast horizontal comparison without oversized cards.

Pricing 8

Outcome Packages Pricing

Services framed by result, scope, and completion signal.

Pricing 9

Modular Add-ons Pricing

Optional capabilities with visible billing units.

Startup Program Pricing

Eligibility, discount, and duration shown before applying.

Single Plan Checklist Pricing

One complete plan with scope and terms together.

Contrast Platform Pricing

A platform promise paired with a clear sales path.

Blog / Article Headers

Editorial entry points for essays, reports, series, and visual stories with consistent context, responsive Grid composition, and readable metadata.

Article header 1

Editorial Centered Article Header

A quiet centered hierarchy for focused long-form reading.

Article header 2

Split Cover Article Header

Editorial context and real photography share an equal Grid.

Article header 3

Panorama Article Header

A broad photograph follows a compact editorial introduction.

Article header 4

Author Feature Article Header

Portrait-oriented photography makes authorship prominent.

Article header 5

Contrast Type Article Header

A high-contrast statement and compact chapter index.

Article header 6

Category Index Blog Header

Publication context and topic discovery share two columns.

Article header 7

Photo Overlay Article Header

A readable story opening sits over real editorial photography.

Article header 8

Sidebar Summary Article Header

A reading guide complements the primary story introduction.

Article header 9

Numbered Series Article Header

Issue numbering and a series map establish sequence.

Article header 10

Magazine Mosaic Article Header

A disciplined photo mosaic supports visual reporting.

Article header 11

Research Brief Article Header

Study facts and authorship frame a formal report.

Article header 12

Minimal Reading Article Header

Type and rules alone prepare readers for long-form content.

Blog / Article Content

Editorial discovery, chronological feeds, issue rails, long-form reading, and archives built with semantic HTML and responsive Ren10 Grid composition.

Featured Story Grid

One lead report and three recent stories form a clear editorial hierarchy.

Category Card Grid

Explicit topics and aligned cards keep the complete collection discoverable.

Editorial Feed

Dates, summaries, and reading times align in a compact chronological list.

Featured Split Rail

A photographic lead story balances a precisely indexed issue rail.

Article TOC Layout

Readable long-form prose pairs with a stable in-page contents sidebar.

Archive Index

A complete year-grouped record preserves topics, titles, and dates.

Editorial Search Results

A labeled query and structured results preserve dates, summaries, and reading time.

Author Profile Feed

Contributor context and recent work form one coherent editorial archive.

Topic Landing

A topic introduction, visual lead, and supporting stories create a useful destination.

Blog content 10

Reading Series

A numbered sequence makes order, progress, and reading time explicit.

Blog content 11

Related Stories Band

Three contextual next steps share a restrained supporting surface.

Blog content 12

Article Closing Panel

Conclusion, author, topics, and next story remain connected without competing.