Lead
A lede paragraph, larger and lighter than the body text, in two sizes and three alignments.
Demo
Quillo is a language for web applications: the pages, the components and the data in one file, run by one binary.
The paragraphs that follow are set in the body size, so the lede stands out as the summary of what is to come.
Everything you need, nothing you don't.
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/lead.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/lead.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/lead.qwe
view LeadDemo() = <div.demo-stack> <div> <Lead id="lead-demo-first">Quillo is a language for web applications: the pages, the components and the data in one file, run by one binary.</Lead> <p id="lead-demo-body" style="margin: 12px 0 0; max-width: 60ch; font: 15px/1.5 var(--ui-font)">The paragraphs that follow are set in the body size, so the lede stands out as the summary of what is to come.</p> </div> <Lead size="lg" align="center" tone="fg" id="lead-demo-large">Everything you need, nothing you don't.</Lead> </div>Source
ui/lead.qwe
// Lead: the opening paragraph of an article or a page, set larger and lighter than// the text that follows, so it reads as the summary.//// <Lead>Quillo is a language for web applications: pages, components and data in one file.</Lead>// <Lead size="lg" align="center">Everything you need, nothing you don't.</Lead>//// children: the text. size: "md" (default, 18px) or "lg" (21px). tone: "muted"// (default, a little lighter than the text) or "fg". align: "start" (default),// "center" or "end". id: the paragraph's id.import ui/theme.qwe use ui_clslet lead_css = css`.ui-lead { margin: 0; max-width: 60ch; font: 400 18px/1.6 var(--ui-font); color: color-mix(in srgb, var(--ui-fg) 78%, var(--ui-muted)); letter-spacing: -.005em; overflow-wrap: anywhere; }.ui-lead-lg { font-size: 21px; line-height: 1.5; }.ui-lead-fg { color: var(--ui-fg); }.ui-lead-center { margin-left: auto; margin-right: auto; text-align: center; }.ui-lead-end { margin-left: auto; text-align: end; }`view Lead(size: str = "md", tone: str = "muted", align: str = "start", id: str? = null, class: str? = null, children) { style global lead_css <p class={ui_cls(["ui-lead", size != "md" && `ui-lead-${size}`, tone != "muted" && `ui-lead-${tone}`, align != "start" && `ui-lead-${align}`, class])} id={id}>{children}</p>}Related
BlockquoteA quotation with the person and the source in a figure, as a bar, with a quote mark, or plain.6 views · 6 downloadsDropCapA paragraph whose first letter is set large and dropped into the first two, three or four lines.5 views · 6 downloadsFootnoteA numbered footnote mark in the text and the list of notes at the end, each linking to the other.6 views · 6 downloadsMarkdownViewA small Markdown subset (headings, emphasis, links, lists, code, quotes) rendered safely as markup, in Quillo, with no HTML let through.4 views · 9 downloadsProseStyles for a block of article HTML (from markdown() or by hand): headings, lists, links, quotes, code, tables.6 views · 5 downloadsPullquoteA line lifted from an article, set large beside the column with the text flowing around it, or across it.5 views · 6 downloads
Thread
Thread 0 posts
On Lead: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.