Styleframe Logo
Typography

Paragraph Element

Style paragraph elements with configurable top and bottom margins using the useParagraphElement composable.
Part of the Global Preset:useParagraphElement is included in the Global Preset (useGlobalPreset) and you can configure it through the preset's paragraph option. For most projects, applying it via the preset is the recommended approach.

Overview

The useParagraphElement composable styles p elements with configurable top and bottom margins. By default, it removes the top margin and sets the bottom margin to your base spacing token.

useParagraphElement

function useParagraphElement(
    s: Styleframe,
    options?: WithThemes<ParagraphElementConfig>
): ParagraphElementResult
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useParagraphElement } from '@styleframe/theme';

const s = styleframe();

const { paragraphMarginTop, paragraphMarginBottom } = useParagraphElement(s);

export default s;

Default Values

OptionDefaultVariableExport
marginTop"0"--paragraph--margin-topparagraphMarginTop
marginBottom"@spacing"--paragraph--margin-bottomparagraphMarginBottom

Custom Values

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useParagraphElement } from '@styleframe/theme';

const s = styleframe();

const { paragraphMarginBottom } = useParagraphElement(s, {
    marginTop: '0',
    marginBottom: '@spacing.lg',
});

export default s;

Best Practices

  • Zero the top margin: The default marginTop: "0" follows the single-direction margin pattern, preventing margin collapse issues between adjacent elements.
  • Use spacing tokens: Reference @spacing or @spacing.lg for bottom margin to stay consistent with your layout system.
  • Keep paragraphs spaced apart: The bottom margin creates visual separation between paragraphs without requiring manual spacing.

Headings

Style heading elements h1 through h6 with configurable font family, weight, line height, color, and per-level sizes using the useHeadingElement composable.

Links

Style anchor elements with configurable color, text decoration, and hover states using the useLinkElement composable.