Row

One record. Cells share the row and wrap when space runs out.

A longer synthetic record wraps naturally when the available space is narrow. Ready

Variations

Content

Source

<script lang="ts">
  import 'portal-bits/styles.css';
  import 'portal-bits/tokens.css';
  import type { Snippet } from 'svelte';

  let { children }: { children: Snippet } = $props();
</script>

{@render children()}

<script lang="ts">
  import RowExample from './RowExample.svelte';
</script>

<RowExample content={"wrapping"} />

<script lang="ts">
  import { Badge, Row, RowList } from 'portal-bits';
  let { content = 'wrapping' }: { content?: 'short' | 'wrapping' } = $props();
</script>

<RowList aria-label="Example record">
  <Row>
    {#if content === 'short'}
      <span>Field notes</span>
    {:else}
      <span>A longer synthetic record wraps naturally when the available space is narrow.</span>
    {/if}
    <Badge>Ready</Badge>
  </Row>
</RowList>

API reference

These tables list the props and snippets that Row declares. Attributes passed through to an element or primitive are listed under Forwarded attributes, not here.

Props

Name	Type	Default	Required	Binding	Description
`class`	`string`	`""`	No	One-way	Extra classes, added after the component classes.

Snippets

Name	Type	Default	Required	Binding	Description
`children`	`Snippet`	None	No	One-way	The cells of the row.

Forwarded attributes

Native `li` attributes: `id`, `aria-*`, `data-*`, and handlers.

No data attributes are documented as stable.

Limits

Place Row inside RowList. Outside a list, an `li` has no list semantics.
Link styling in cells belongs to you.

Related