Tile

A flexible content container. Use r-tile as the container and r-tile-content for each section.

Usage

import { RTile, RTileContent } from '@rebilly/revel';

<r-tile title="Title">
  <r-tile-content>Primary</r-tile-content>
  <r-tile-content type="secondary">Secondary</r-tile-content>
</r-tile>;

Examples

Basic tile

Use the title prop and the actions slot on r-tile to render a header. Place one or more r-tile-content children in the default slot.

r-tile-content is primary by default. Use type="secondary" for a sunken section. An optional title on r-tile-content renders as a section heading.

Inset

Use inset to change title and content padding. The value applies is-inset-* and maps to a space token (5 is --r-space-5).

Plain tile

Use type="plain" to remove the tile border and radius. The title gets a bottom border.

Description tile

Use type="description" for the same flush layout as plain, without a title bottom border. Content section dividers stay.