import { Meta, Story, Canvas, Title, Subtitle, ArgsTable, Source } from '@storybook/addon-docs';
import { Text, P, A } from '@lendi/ui/Typography';
import { VerticalRhythm } from '@lendi/ui/Layout';
import { Button } from '@lendi-ui/button';
import { TITLE_COMPONENTS_DECOMISSIONED } from '../../../../../../docs/content.ts';
Vertical RhythmA Spacer for long-form text content
Use vertical rhythm with long form content. It adds extra spacing where appropriate after headings and between paragraphs, depending on the information density.
Vertical Rhythm is a new component, not a LUI Next version of an existing component. You can use it at your discretion, however many of the LUI Now components include margin on them which results in extra spacing between items when using them in a Spacer.
## Usage
Unlike Spacer, Vertical Rhythm uses `align-items: stretch` by default, so direct children take up 100% of the width of the container by default. If you want a child's width to be determined by its own content (like width: auto), it's best to nest the item in a container, like with the buttons below. Alternatively, you can set the `align` prop to `start`, but this will cause block-level items to no longer take up the full width by default.
## Props