Styleframe Logo
Composables

Definition Lists Element

Style definition list elements (dl, dt, dd) with configurable margin, font weight, and spacing using the useDlElement, useDtElement, and useDdElement composables.

Overview

The definition list composables style the dl, dt, and dd elements for displaying term-description pairs. They control margin, font weight, and spacing to create readable, well-structured definition lists.

useDlElement

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

const s = styleframe();

const { dlMarginBottom } = useDlElement(s);

export default s;

Default Values

OptionDefaultVariableExport
marginBottom"@spacing"--dl--margin-bottomdlMarginBottom

useDtElement

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

const s = styleframe();

const { dtFontWeight } = useDtElement(s);

export default s;

Default Values

OptionDefaultVariableExport
fontWeight"@font-weight.bold"--dt--font-weightdtFontWeight

useDdElement

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

const s = styleframe();

const { ddMarginBottom, ddMarginLeft } = useDdElement(s);

export default s;

Default Values

OptionDefaultVariableExport
marginBottom"@spacing.xs"--dd--margin-bottomddMarginBottom
marginLeft"0"--dd--margin-leftddMarginLeft

Custom Values

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useDlElement, useDtElement, useDdElement } from '@styleframe/theme';

const s = styleframe();

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

const { dtFontWeight } = useDtElement(s, {
    fontWeight: '@font-weight.semibold',
});

const { ddMarginBottom, ddMarginLeft } = useDdElement(s, {
    marginBottom: '@spacing.sm',
    marginLeft: '@spacing.md',
});

export default s;

Best Practices

  • Use all three together: The dl, dt, and dd composables are designed to work as a set for consistent definition list styling.
  • Keep terms bold: The default bold font weight for dt elements establishes clear visual hierarchy between terms and descriptions.
  • Reset the left margin: The default marginLeft: "0" removes the browser default indentation on dd elements for a cleaner layout.

Code

Style inline code and preformatted text blocks with configurable font family, font size, and spacing using the useCodeElement and usePreElement composables.

Focus

Apply consistent focus-visible outline styles across all elements with configurable color, width, style, and offset using the useFocusState composable.