Styleframe Logo
Composables

Horizontal Rule Element

Style horizontal rule elements with configurable border color, width, style, and margin using the useHrElement composable.

Overview

The useHrElement composable styles the hr element as a top-border-only divider with configurable border properties and vertical margin. It zeroes out the right, bottom, and left borders for a clean single-line separator.

useHrElement

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

const s = styleframe();

const {
    hrBorderColor,
    hrBorderWidth,
    hrBorderStyle,
    hrMargin,
} = useHrElement(s);

export default s;

Default Values

OptionDefaultVariableExport
borderColor"@color.gray-200"--hr--border-colorhrBorderColor
borderWidth"@border-width"--hr--border-widthhrBorderWidth
borderStyle"solid"--hr--border-stylehrBorderStyle
margin"@spacing.lg"--hr--marginhrMargin

The margin variable controls both margin-top and margin-bottom. Horizontal margins are fixed at 0.

Custom Values

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

const s = styleframe();

const { hrBorderColor, hrMargin } = useHrElement(s, {
    borderColor: '@color.gray-300',
    borderStyle: 'dashed',
    margin: '@spacing.xl',
});

export default s;

Best Practices

  • Use light border colors: The default @color.gray-200 provides a subtle divider that does not dominate the visual hierarchy.
  • Customize border color per-theme: Use theme overrides to adjust the border color for dark mode (e.g., @color.gray-700).
  • Use spacing tokens for margin: Reference @spacing.lg or @spacing.xl to keep divider spacing consistent with your layout system.

Headings

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

Iframe

Remove the default border from iframe elements using the useIframeElement composable.