GitHub

text.prose

Rich content written elsewhere and shown here: rendered Markdown, a post body with headings, lists and links

Component

<Text>

Renders

<div>

Profile

UI

Comes from

Editorial pack
View as Markdown

Text intents

Example

Preview

Getting started

Install the CLI, then run prongs add.

  • Components go in your repo
  • PRONGS.md tells your agents
<Text intent="text.prose" dangerouslySetInnerHTML={{ __html: renderedMarkdown }} />

Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

  • If it is

    Use

  • Rich content written elsewhere and shown here: rendered Markdown, a post body with headings, lists and links

    text.prose this page

  • A sentence or paragraph you write in the page

    text.body

Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

For registry authors

Pack intent. prongs add editorial puts the editorial pack’s intents in your registry. They are then yours like the starter intents: rename, restyle and add to them, and see them with prongs add gallery.

What this intent is built from and its entry in components/prongs/registry.ts. You only need this to change how it looks or to add an intent like it.

How text.prose resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

  • typography.body

    Reading type

    text-base leading-7
  • tone.default

    Main text colour

    text-foreground
  • text.prose

    Rich content written elsewhere and shown here: rendered Markdown, a post body with headings, lists and links

    [&_:is(h2,h3)]:font-semibold [&_:is(p,ul,ol)]:my-4
[&_a]:underline [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal
[&_ol]:pl-6
Final classes
text-base leading-7 text-foreground [&_:is(h2,h3)]:font-semibold
[&_:is(p,ul,ol)]:my-4 [&_a]:underline [&_ul]:list-disc
[&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6
Definition
TS
'text.prose': {
  kind: 'semantic',
  description: 'Rich content written elsewhere and shown here: rendered Markdown, a post body with headings, lists and links',
  refs: ['typography.body', 'tone.default'],
  binding: {
    element: 'div',
    classes: '[&_:is(h2,h3)]:font-semibold [&_:is(p,ul,ol)]:my-4 [&_a]:underline [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6',
  },
  notFor: [
    {
      context: 'a sentence or paragraph you write in the page',
      instead: 'text.body',
    },
  ],
},