Typography

Demonstrating the Text and Span components with rich inline formatting. All styling is type-safe with no raw CSS classes.

Lorem Ipsum (Latin)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum et dolorum fuga.

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Lorem Ipsum (English)

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.

To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

Formatting Reference

Semantic Elements

Bold text renders as <strong> for importance. Italic text renders as <em> for emphasis. Code text renders as <code> with monospace font. Marked text renders as <mark> for highlighting. Small text renders as <small>. Subscript: H2O. Superscript: E=mc2. Deleted text and inserted text.

Presentational Styling

Underlined text for emphasis. Strikethrough text for corrections. uppercase text for headings. LOWERCASE TEXT for normalization. title case text for titles.

Combined Styles

Bold + Italic + Color + Size shows how styles can be combined freely. const example = true; is code with custom color.

Line Clamping

maxLines: 2

This paragraph demonstrates line clamping. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

maxLines: 3

This paragraph is clamped at three lines. But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.

Code

Inline code within text: Run

npm install @casaba/fluid

to install the package, then import with

import * as Fluid from '@casaba/fluid'

.

Variants

soft (default)solidoutlineghost

Sizes

size 1size 2size 3size 4size 5

Colors

jaderubyamberiris

Keyboard

Use

Cmd

+

K

to open the command palette, or

Ctrl

+

Shift

+

P

on Windows.

Common Shortcuts

Copy:

Cmd

+

C

Paste:

Cmd

+

V

Undo:

Cmd

+

Z

Save:

Cmd

+

S

Sizes

Size 1Size 2Size 3Size 4Size 5

Blockquote

The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.

With Attribution

Simplicity is the ultimate sophistication.

— Leonardo da Vinci

Sizes

Size 2: A small quote for compact contexts.
Size 4: A medium quote for balanced emphasis.
Size 6: A larger quote for prominent display.

Colors

Ruby: Passion and intensity in every word.
Jade: Calm wisdom and natural balance.
Amber: Warmth and optimistic energy.