@opeolluwa/ryder

SubText ​

The muted supporting line: a plain <p> with a soft grey colour and a comfortable leading-6. Pair it with LeadingText for title + description blocks (see AuthHeader).

vue
<script setup lang="ts">
import RyderSubText from "@opeolluwa/ryder/components/typography/SubText.vue"
</script>

<template>
  <RyderSubText>Due before 5 pm today.</RyderSubText>
</template>

Examples ​

vue
<script setup lang="ts">
import LeadingText from "../../../src/components/typography/LeadingText.vue";
import SubText from "../../../src/components/typography/SubText.vue";
</script>

<template>
  <div class="max-w-xl space-y-1">
    <LeadingText>order #1042 is on the way</LeadingText>
    <SubText>
      The courier picked it up this morning; it is due before 5 pm today.
    </SubText>
  </div>
</template>

Props ​

None.

Emits ​

None.

Slots ​

SlotPropsContent
default—Paragraph text.

Notes ​

  • Renders text-gray-500 leading-6 — it stays a normal <p>, so block content (lists, links) can go inside the slot without extra markup.