Styleframe Logo
Structure

Address Element

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

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.

Output

Style output and sample output elements using the useOutputElement and useSampElement composables.

Horizontal Rule

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