TMS List

TMSList renders a labelled set of links or text items from structured data. It supports compact stacked lists, inline row lists, and opt-in multicolumn item layouts.

Usage

Executive errands.

• Alignment rituals
• Hero creation
• Rectangle deployment
• Square containment
• Commitment architecture
• Final-frontier stakeholder expansion

<!-- items-preset="balanced" -->
<!-- items-count="6" -->
<TMSList
  header="Executive errands."
  header-link="/styleguide/principles"
  columns="none"
  orientation="column"
  :items="[
    {
      label: 'Alignment rituals',
      link: '/styleguide/principles',
      attrs: { target: '' },
    },
    {
      label: 'Hero creation',
      link: '/components/tms-hero',
      attrs: { target: '' },
    },
    {
      label: 'Rectangle deployment',
      link: '/components/tms-grid',
      attrs: { target: '' },
    },
    {
      label: 'Square containment',
      link: '/components/tms-box',
      attrs: { target: '' },
    },
    {
      label: 'Commitment architecture',
      link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      attrs: { target: '_blank' },
    },
    {
      label: 'Final-frontier stakeholder expansion',
      link: 'https://www.youtube.com/watch?v=cWGQGJfNSUw',
      attrs: { target: '_blank' },
    },
  ]"
/>

source |

Props

Prop	Type	Default	Notes
header	string	''	Visible list label rendered above or beside the list.
headerLink	string	''	Makes the list label clickable when populated.
items	Array<TMSListItem>	[]	Recommended list authoring path.
orientation	'column' | 'row'	'column'	Controls list layout.
columns	'none' | '2' | '3'	'none'	Opts the item list into vertical multi-column layout.

TMSListItem fields:

Field	Type	Required	Notes
label	string	Yes	Visible item text.
link	string	No	Renders the item as a link when populated.
attrs	Record<string, string | boolean>	No	Safe anchor attributes for linked items.

attrs supports target, rel, download, title, aria-*, and data-*. If target is _blank and rel is omitted, rel="noreferrer" is added automatically.

INFO

TMSList automatically labels its own region with the visible list label. Use a separate Markdown heading before the component when the list should appear in the page outline.

Slots

Slot	Notes
default	Optional <li> children. Overrides items if used.