Styleframe Logo
Typography

Definition Lists Element

Style definition list elements (dl, dt, dd) with configurable margin, font weight, and spacing using the useDlElement, useDtElement, and useDdElement composables.
Part of the Global Preset:useDlElement, useDtElement, and useDdElement are included in the Global Preset (useGlobalPreset) and you can configure them through the preset's dl, dt, and dd options. For most projects, applying them via the preset is the recommended approach.

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.

Lists

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

Abbreviation

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