Fusion UI

Overview

FlowLayout places elements in a row with the standard gap and wraps them onto the next line when space runs out, here shown with tiles.

Example Title

Example Content

Example Title

Example Content

"use client";

import React from "react";
import {FlowLayout, Tile, TileContent, TileFooter, TileHeader} from "@brynlabs/fusion-ui";

export const FlowLayoutExample = () => (
  <FlowLayout>
    <Tile>
      <TileHeader>Example Title</TileHeader>
      <TileContent>Example Content</TileContent>
      <TileFooter>Example Footer</TileFooter>
    </Tile>
    <Tile>
      <TileHeader>Example Title</TileHeader>
      <TileContent>Example Content</TileContent>
      <TileFooter>Example Footer</TileFooter>
    </Tile>
  </FlowLayout>
);

Flow Layout

Overview