Wireframe

NbWireframe draws a schematic thumbnail of a layout: bars for copy, pills for buttons, boxes for media, on a 12-column grid. Use it where someone has to pick a layout before it exists, such as a block picker or a template gallery. A name and a description cannot show a shape at a glance, and a wireframe can.

The spec is data, not markup, so it can come from anywhere (a site's registry, a server) without the host rendering anything it did not write.

<template>
  <NbWireframe
    label="Product hero"
    :spec="{
      rows: [
        [
          { span: 7, parts: ['eyebrow', 'title', 'text', 'buttons'] },
          { span: 5, parts: ['image'] },
        ],
      ],
    }"
  />
</template>

Rows, columns and counts ​

A spec is rows of columns. Each column spans part of the 12-column grid and lists its parts from top to bottom. A part can carry a count after a colon.

A picture never takes more than part of the frame's height, so whatever sits under it (a caption, a button) stays in view.

Parts ​

An unknown part is ignored rather than refused, so a spec written for a newer version of the library still draws on an older one.

Accessibility ​

Without a label the wireframe is decorative (aria-hidden). With one it is an image with that name. Give it a label when nothing next to it already names the layout.

Props ​

Types ​

interface IWireframeSpec {
  tone?: 'light' | 'dark'
  rows: IWireframeColumn[][]
}

interface IWireframeColumn {
  span?: number // of 12, defaults to an equal share of the row
  parts: string[] // e.g. 'title', 'cards:3'
  align?: 'start' | 'center' | 'end'
}