Skip to content
Alfred J Lin edited this page Jun 16, 2026 · 2 revisions

Design File

Figma link

Introduction

The quote component is used to highlight a notable quotation. It supports two display variants and can be styled in either a light or dark theme.

Component Structure

Variants

There are two variants: Feature and Simple.

1. Feature

The default variant. A visually prominent display intended to draw attention to a key quote. Best used as a standalone section break or highlight within a page.

2. Simple

A more minimal display suitable for embedding a quote alongside other content without drawing as much visual emphasis.

Props

Field Data Type Requirement Description Note
Variant String Required The display variant of the component. Options: feature, simple.
Theme String Optional The color theme of the component. Options: light, dark. Defaults to dark.
Component ID String Optional An ID for the component, useful for in-page anchor linking.

Slots

Field Data Type Requirement Description Note
Quote Text WYSIWYG Required The body of the quote. Use plain text format. Quotation marks are added automatically by the component styling.
Author Name String Optional The name of the person being quoted.
Author Title String Optional The title or role of the person being quoted.

Clone this wiki locally