Styleframe Logo
Composables

Address Element

Style address elements with configurable bottom margin using the useAddressElement composable.

Overview

The useAddressElement composable styles the address element with consistent bottom margin, resets the default italic font style to normal, and inherits the parent line height.

useAddressElement

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

const s = styleframe();

const { addressMarginBottom } = useAddressElement(s);

export default s;

Default Values

OptionDefaultVariableExport
marginBottom"@spacing"--address--margin-bottomaddressMarginBottom

The composable also applies fixed styles that are not configurable: font-style: normal and line-height: inherit.

Custom Values

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

const s = styleframe();

const { addressMarginBottom } = useAddressElement(s, {
    marginBottom: '@spacing.lg',
});

export default s;

Best Practices

  • Use spacing tokens: Reference design tokens like @spacing or @spacing.lg to keep address margins consistent with the rest of your layout.
  • Rely on the font-style reset: The composable resets font-style to normal, removing the browser default italic styling on address elements.

Abbreviation

Style abbreviation elements with configurable cursor and text decoration using the useAbbrElement composable.

Body

Style the body element with configurable color, background, font family, font size, and line height using the useBodyElement composable.