Styleframe Logo
Composables

Lists Element

Style ordered and unordered list elements with configurable margin and padding using the useOlElement and useUlElement composables.

Overview

The list composables style ol and ul elements with configurable bottom margin and left padding. Both composables automatically reset the bottom margin of nested lists to prevent double spacing.

useOlElement

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

const s = styleframe();

const { olMarginBottom, olPaddingLeft } = useOlElement(s);

export default s;

Default Values

OptionDefaultVariableExport
marginBottom"@spacing"--ol--margin-bottomolMarginBottom
paddingLeft"@spacing.lg"--ol--padding-leftolPaddingLeft

useUlElement

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

const s = styleframe();

const { ulMarginBottom, ulPaddingLeft } = useUlElement(s);

export default s;

Default Values

OptionDefaultVariableExport
marginBottom"@spacing"--ul--margin-bottomulMarginBottom
paddingLeft"@spacing.lg"--ul--padding-leftulPaddingLeft

Custom Values

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useOlElement, useUlElement } from '@styleframe/theme';

const s = styleframe();

const { olMarginBottom } = useOlElement(s, {
    marginBottom: '@spacing.lg',
    paddingLeft: '@spacing.xl',
});

const { ulMarginBottom } = useUlElement(s, {
    marginBottom: '@spacing.lg',
    paddingLeft: '@spacing.xl',
});

export default s;

Best Practices

  • Use both together: Apply useOlElement and useUlElement together with matching values for consistent list styling.
  • Rely on nested list resets: Both composables automatically set margin-bottom: 0 on nested lists (ol ol, ol ul, ul ol, ul ul), preventing double spacing in multi-level lists.
  • Use spacing tokens: Reference @spacing and @spacing.lg for margin and padding to stay consistent with your layout system.

Links

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

Mark

Style highlighted text elements with configurable background, color, and padding using the useMarkElement composable.