Layout · 4 Props

Row

Horizontal flexbox container for inline arrangement of child blocks. Supports gap, alignment, wrapping, and responsive stacking.

Layout 4 Props

src/components/blocks/Row.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
as	string	div	"header" \| "footer" \| "section" \| "div" \| "nav"
class	string	—
fullWidth	boolean	false
reverse	boolean	false

Beispiele

Alignment

start, center alignment.

align: start

A B C

align: center

A B C

{
  "type": "stack",
  "props": {
    "gap": "md"
  },
  "blocks": [
    {
      "type": "text",
      "props": {
        "size": "xs",
        "tone": "muted",
        "text": "align: start"
      }
    },
    {
      "type": "row",
      "props": {
        "gap": "sm",
        "align": "start"
      },
      "blocks": [
        {
          "type": "badge",
          "props": {
            "label": "A",
            "tone": "primary"
          }
        },
        {
          "type": "badge",
          "props": {
            "label": "B",
            "tone": "primary"
          }
        },
        {
          "type": "badge",
          "props": {
            "label": "C",
            "tone": "primary"
          }
        }
      ]
    },
    {
      "type": "text",
      "props": {
        "size": "xs",
        "tone": "muted",
        "text": "align: center"
      }
    },
    {
      "type": "row",
      "props": {
        "gap": "sm",
        "align": "center"
      },
      "blocks": [
        {
          "type": "badge",
          "props": {
            "label": "A",
            "tone": "accent"
          }
        },
        {
          "type": "badge",
          "props": {
            "label": "B",
            "tone": "accent"
          }
        },
        {
          "type": "badge",
          "props": {
            "label": "C",
            "tone": "accent"
          }
        }
      ]
    }
  ]
}

<Stack gap="md">
  <Text size="xs" tone="muted" text="align: start" />
  <Row gap="sm" align="start">
    <Badge label="A" tone="primary" />
    <Badge label="B" tone="primary" />
    <Badge label="C" tone="primary" />
  </Row>
  <Text size="xs" tone="muted" text="align: center" />
  <Row gap="sm" align="center">
    <Badge label="A" tone="accent" />
    <Badge label="B" tone="accent" />
    <Badge label="C" tone="accent" />
  </Row>
</Stack>

Wrap

Wraps to next line when space runs out.

Tag 1 Tag 2 Tag 3 Tag 4 Tag 5 Tag 6 Tag 7 Tag 8 Tag 9 Tag 10 Tag 11 Tag 12

{
  "type": "row",
  "props": {
    "gap": "sm",
    "wrap": true
  },
  "blocks": [
    {
      "type": "badge",
      "props": {
        "label": "Tag 1",
        "tone": "primary",
        "variant": "soft"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Tag 2",
        "tone": "primary",
        "variant": "soft"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Tag 3",
        "tone": "primary",
        "variant": "soft"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Tag 4",
        "tone": "primary",
        "variant": "soft"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Tag 5",
        "tone": "primary",
        "variant": "soft"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Tag 6",
        "tone": "primary",
        "variant": "soft"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Tag 7",
        "tone": "primary",
        "variant": "soft"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Tag 8",
        "tone": "primary",
        "variant": "soft"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Tag 9",
        "tone": "primary",
        "variant": "soft"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Tag 10",
        "tone": "primary",
        "variant": "soft"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Tag 11",
        "tone": "primary",
        "variant": "soft"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Tag 12",
        "tone": "primary",
        "variant": "soft"
      }
    }
  ]
}

<Row gap="sm" wrap>
  <Badge label="Tag 1" tone="primary" variant="soft" />
  <Badge label="Tag 2" tone="primary" variant="soft" />
  <Badge label="Tag 3" tone="primary" variant="soft" />
  <Badge label="Tag 4" tone="primary" variant="soft" />
  <Badge label="Tag 5" tone="primary" variant="soft" />
  <Badge label="Tag 6" tone="primary" variant="soft" />
  <Badge label="Tag 7" tone="primary" variant="soft" />
  <Badge label="Tag 8" tone="primary" variant="soft" />
  <Badge label="Tag 9" tone="primary" variant="soft" />
  <Badge label="Tag 10" tone="primary" variant="soft" />
  <Badge label="Tag 11" tone="primary" variant="soft" />
  <Badge label="Tag 12" tone="primary" variant="soft" />
</Row>