Preview tile, Conduction Design System

Design system / Components / Preview tile

PreviewTile · iframe-preview card for hub pages

Lean product landing

Hero + value + apps strip + CTA. The entry point every docs site opens with; cobalt headline, one-orange accent on the install button.

02 · Intro

What it is

Conceptual overview. Three-tile "what is it" + lede + a pair-of-pages link row. Read this before the install guide.

React / MDX usage

Mount in MDX as `<PreviewTileGrid/>` + `<PreviewTile/>`

Iframe-preview card grid used by hub pages (the components index, the product-pages index, the print index) to show the full render of a sub-page in-place. Each tile scales its iframe via a CSS container query (transform: scale(calc(100cqw / 1440px))) so the preview always reads as the full desktop layout, just shrunk. Click takes you to the live sub-page.

Import & example

import {PreviewTileGrid, PreviewTile} from '@conduction/docusaurus-preset/components';

<PreviewTileGrid columns={2}>
  <PreviewTile
    num="01 · Landing"
    title="Lean product landing"
    href="/docs/landing"
    iframeSrc="/docs/landing"
  >
    Hero + value + apps strip + CTA...
  </PreviewTile>
  <PreviewTile
    num="02 · Intro"
    title="What it is"
    href="/docs/intro"
    iframeSrc="/docs/intro"
  >
    Conceptual overview...
  </PreviewTile>
</PreviewTileGrid>

Props

PreviewTileGrid — columns (1, 2, or 3; default 2)
PreviewTile — num (mono-uppercase caption), title (h3), href (where the click goes), iframeSrc (page to render), previewHeight (override the default 280px)
children the description paragraph below the title

Cousin of .component-tile on preview/components.html — same idea, generalised so any hub page can use it without copying the CSS.