Heading ​

Headings are used as the titles of each major section of a page in the interface. For example, card components generally use headings as their title.

Usage ​

<script lang="ts" setup>
import { Heading } from '@returnless/focus-ui';
</script>

<template>
  <Heading>XL Heading</Heading>
  <Heading size="2xl">2XL heading</Heading>
</template>

Best practices ​

Headings should:

• Clearly describe the section of interface they refer to
• Highlight the most important concept or piece of information users need to know
• Sit at the top of the section of interface they refer to

Content guidelines ​

Headings and subheadings are titles and subtitles that refer to sections of the interface.

Basic structure ​

Headings and subheadings should be:

Informative and descriptive:

• Highlight the most important concept or piece of information for merchants
• Help merchants understand what they’ll find in the section below

Concise and scannable:

• Use simple, clear language
• Keep headings to a single sentence
• Avoid using punctuation such as periods, commas, or semicolons
• Write in sentence case (capitalize the first word and proper nouns only)