Typography

Typography sets a piece of text on the library's scale. Heading, Paragraph and Code are the same component with the type decided for you, which is what keeps the semantic element and the visual size from drifting apart: a Heading at level="3" renders an <h3> whatever size you then give it.

import { Heading, Paragraph, Typography } from "ropav";

The quick brown fox jumps over the lazy dog.

type

 h1h2h3h4h5h6bodybody-smbody-xscode

weight

 unsetnormalmediumsemiboldbold

align

 startcenterendjustify

color

 defaultmuted

truncate

<Typography class="w-80">The quick brown fox jumps over the lazy dog.</Typography>

The scale

Heading level 1

Heading level 3

Body text, the size everything else is measured against.

Body small, for secondary lines.

Body extra small, muted.

typography-scale.vue

<script setup lang="ts">
import { Heading, Paragraph, Typography } from "ropav";
</script>

<template>
  <div class="stack">
    <Heading :level="1">Heading level 1</Heading>
    <Heading :level="3">Heading level 3</Heading>
    <Paragraph>Body text, the size everything else is measured against.</Paragraph>
    <Paragraph size="sm">Body small, for secondary lines.</Paragraph>
    <Typography color="muted" type="body-xs">Body extra small, muted.</Typography>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 2);
}
</style>

Heading takes level, Paragraph takes size. Reach for Typography directly when you want a size that does not match the element you need — a page title that has to render as an <h2> for the outline but read at h1 size, say.

Truncating

truncate holds the text to one line and ends it with an ellipsis. It needs a width to work against: on its own the element is as wide as its content, and nothing overflows.

A single line that runs past the width it was given, and stops with an ellipsis rather than wrapping.

typography-truncate.vue

<script setup lang="ts">
import { Paragraph } from "ropav";
</script>

<template>
  <div class="frame">
    <Paragraph truncate>
      A single line that runs past the width it was given, and stops with an ellipsis rather than
      wrapping.
    </Paragraph>
  </div>
</template>

<style scoped>
.frame {
  width: calc(var(--rp-spacing) * 64);
}
</style>

Prose

Prose is for markup you did not write — rendered markdown, a CMS field, an email body. It styles the plain elements inside it rather than taking a type of its own, so <h2>, <p>, <ul> and <code> arrive on the scale without any of them being given a class.

API

Typography

Prop	Type	Default	Description
align	"start" | "center" | "end" | "justify"	"start"	Text alignment.
color	"default" | "muted"	"default"	Text colour.
slot	string	—	Native slot name, matching the DOM prop accepted by the React primitive.
truncate	boolean	—	Truncates overflowing text to one line.
type	"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "body-sm" | "body-xs" | "code"	"body"	Semantic and visual text style.
weight	"normal" | "medium" | "semibold" | "bold"	—

Slots: default.

Code

Prop	Type	Default	Description
align	"start" | "center" | "end" | "justify"	"start"	Text alignment.
color	"default" | "muted"	"default"	Text colour.
slot	string	—	Native slot name, matching the DOM prop accepted by the React primitive.
truncate	boolean	—	Truncates overflowing text to one line.
weight	"normal" | "medium" | "semibold" | "bold"	—

Slots: default.

Heading

Prop	Type	Default	Description
align	"start" | "center" | "end" | "justify"	"start"	Text alignment.
color	"default" | "muted"	"default"	Text colour.
level	1 | 2 | 3 | 4 | 5 | 6	1	Semantic heading level.
slot	string	—	Native slot name, matching the DOM prop accepted by the React primitive.
truncate	boolean	—	Truncates overflowing text to one line.
weight	"normal" | "medium" | "semibold" | "bold"	—

Slots: default.

Paragraph

Prop	Type	Default	Description
align	"start" | "center" | "end" | "justify"	"start"	Text alignment.
color	"default" | "muted"	"default"	Text colour.
size	"xs" | "sm" | "base"	"base"	Body text size.
slot	string	—	Native slot name, matching the DOM prop accepted by the React primitive.
truncate	boolean	—	Truncates overflowing text to one line.
weight	"normal" | "medium" | "semibold" | "bold"	—

Slots: default.

Prose

Prop	Type	Default	Description
slot	string	—

Slots: default.