Partial Component

Text

The Text partial provides flexible text rendering with support for lead-ins, titles, subtitles, and markdown-formatted prose content. It is the primary text building block for most section components.

Manifest

json

{
  "name": "text",
  "type": "_partials",
  "styles": ["text.css"],
  "scripts": [],
  "requires": []
}

Configuration

yaml

text:
  leadIn: 'Introduction'
  title: 'Main Heading'
  titleTag: 'h2'
  subTitle: 'Supporting text'
  prose: |
    Main content with **markdown** support including lists, links, and formatting.

Configuration Options

Property	Type	Required	Default	Description
`leadIn`	string	No	-	Short introductory text above title
`title`	string	No	-	Main heading text
`titleTag`	string	No	'h2'	HTML tag for title (h1-h6)
`subTitle`	string	No	-	Supporting text below title
`prose`	string	No	-	Main content with markdown support

Examples

Below are examples of the text partial with different configurations:

Complete Example

All Properties Configured

This shows all text properties together

This example demonstrates the text partial with all properties configured. The lead-in provides context, the title grabs attention, the subtitle adds detail, and the prose delivers the main content.

The prose supports markdown formatting including italics, links, and lists:

Bullet points
Multiple items
Clean formatting

Minimal Configuration

This example shows the text partial with just a title and prose content. No lead-in or subtitle is provided, demonstrating the flexibility of optional properties.

The partial gracefully handles missing properties without rendering empty elements.

Notes

Prose content is processed through the mdToHTML filter
Uses appropriate heading tags and semantic structure

Styling

The text partial's adjustable values are component-scoped custom properties, declared on .prose with fallbacks into the global design tokens. Override the properties from lib/overrides/text/text.css, not the rules that consume them. The inline-code treatment is the set sites change most.

Property	Default	Controls
`--text-code-font`	`'Courier New', monospace`	Inline code font
`--text-code-background`	`var(--color-background-light)`	Inline code background
`--text-code-padding`	`0.2em 0.4em`	Inline code padding
`--text-code-radius`	`0.25rem`	Inline code corner radius
`--text-blockquote-accent`	`var(--color-primary)`	Blockquote left border

css

/* lib/overrides/text/text.css: inline code as plain prose */
.prose {
  --text-code-font: monospace;
  --text-code-background: transparent;
  --text-code-padding: 0;
  --text-code-radius: 0;
}