hygguile_components_typography (Untitled Document)

1.25 (hygguile components typography)

Procedures

1.25.1 Procedures

Procedure: a content KEY: #:weight #:size #:color #:family #:hover #:extra-classes #:href ¶

Create an HTML anchor link (<a>) component.

If the href key argument evaluates to false, the hyperlink target location defaults directly to the structural evaluation of content.

content: The text label or component displayed inside the interactive anchor boundary.
weight: List of symbols representing font weight CSS classes.
size: List of symbols representing text sizing CSS classes.
color: List of symbols representing base link text color CSS classes.
family: List of symbols representing font family CSS classes.
hover: List of symbols representing interactive state hover coloring CSS rules.
extra-classes: List of base text formatting utility attributes.
href: Optional explicit destination target path URL string.

(a "https://gnu.org" #:extra-classes '(underline))

Procedure: abbr content KEY: #:title #:weight #:color #:size #:decoration #:abbr-classes ¶

Create an inline HTML <abbr> fragment expanding an abbreviation.

The expansion travels in the title attribute, which browsers show on hover and assistive technology can read out.

content: The abbreviation text, e.g. "HTTP".
title: The expansion, e.g. "HyperText Transfer Protocol".
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
decoration: List of symbols representing text decoration classes.
abbr-classes: List of additional typography utility classes.

(abbr "HTTP" #:title "HyperText Transfer Protocol")

Procedure: code content KEY: #:weight #:color #:size #:background #:rounding #:shadow #:padding-y #:padding-x #:code-classes ¶

Create an inline HTML <code> fragment.

content: The code instruction text string.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
background: List of symbols representing inline code surface container background colors.
rounding: List of symbols representing container boundary radius options.
shadow: List of symbols representing structural layout presentation depth drops.
padding-y: List of symbols controlling top/bottom baseline cell padding spaces.
padding-x: List of symbols controlling left/right horizontal boundary alignment padding.
code-classes: List of font typography rules enforcing monospaced code metrics.

(code "(car list-expression)")

Procedure: em content KEY: #:weight #:color #:family #:leading #:style #:size ¶

Create an HTML emphasis (<em>) layout block.

content: The inner text content or target inline nodes.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
leading: List of symbols representing line-height spacing CSS classes.
style: List of symbols representing text element style transformations.
size: List of symbols representing text sizing CSS classes.

(em "Please notice this crucial contextual exception.")

Procedure: glossary-term term KEY: #:href #:note #:position #:classes ¶

Create an inline term that may link to its documentation and may spell itself out.

A page’s prose names a technology once and this puts the two other things that name implies on that same word: where the term is documented, and, for an abbreviation, what it stands for. The note is a tooltip, so it appears on hover and on keyboard focus alike, and it wraps the link rather than sitting beside it – one word carries both, the reader who has never met the abbreviation learns what it stands for without leaving the page, and the reader who wants the manual follows that same word.

term: The word as the prose writes it.
href: Where the term is documented, or #f for a term that is only text.
note: What the term stands for, or #f for a term with nothing to spell out.
position: Where the note appears: 'top (default), 'bottom, 'left or 'right.
classes: List of additional utility CSS classes for the note.

(glossary-term "SXML"
               #:href "https://en.wikipedia.org/wiki/SXML"
               #:note "Scheme XML: XML written as S-expressions")

Procedure: h1 content KEY: #:weight #:color #:family #:size #:leading ¶

Create an HTML <h1> heading.

content: The inner text string or child elements of the heading.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.
leading: List of symbols representing the line-height, defaulting to the ratio the heading scale pairs with size (see heading-leading). A size the scale does not name is led by its tightest ratio, so the ink of a heading a page has resized for itself still fits its line box.

(h1 "Main Page Title" #:color '(text-onyx-700 dark:text-stone-100))

Procedure: h2 content KEY: #:weight #:color #:family #:size #:leading ¶

Create an HTML <h2> heading.

content: The inner text string or child elements of the heading.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.
leading: List of symbols representing the line-height, defaulting to the ratio the heading scale pairs with size.

(h2 "Section Subtitle" #:weight '(font-semibold))

Procedure: h3 content KEY: #:weight #:color #:family #:size #:leading ¶

Create an HTML <h3> heading.

content: The inner text string or child elements of the heading.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.
leading: List of symbols representing the line-height, defaulting to the ratio the heading scale pairs with size.

(h3 "Subsection Heading")

Procedure: h4 content KEY: #:weight #:color #:family #:size #:leading ¶

Create an HTML <h4> heading.

content: The inner text string or child elements of the heading.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.
leading: List of symbols representing the line-height, defaulting to the ratio the heading scale pairs with size.

(h4 "Minor Subsection Title")

Procedure: kbd content KEY: #:weight #:size #:color #:background #:border-color #:rounding #:shadow #:padding-y #:padding-x #:kbd-classes ¶

Create an inline HTML <kbd> fragment for user keyboard input.

Use kbd for keys the user presses (Ctrl, Enter, Esc). Marking them up lets assistive technology announce them as input rather than as ordinary prose.

content: The key name or inline nodes.
weight: List of symbols representing font weight CSS classes.
size: List of symbols representing text sizing CSS classes.
color: List of symbols representing text color CSS classes.
background: List of symbols representing the key surface background colors.
border-color: List of symbols representing the key border colors.
rounding: List of symbols representing container boundary radius options.
shadow: List of symbols representing the key depth shadow.
padding-y: List of symbols controlling top/bottom padding.
padding-x: List of symbols controlling left/right padding.
kbd-classes: List of structural typography rules for keyboard keys.

(kbd "Ctrl")

Procedure: mark content KEY: #:weight #:color #:size #:background #:rounding #:padding-x #:mark-classes ¶

Create an inline HTML <mark> fragment highlighting relevant text.

The highlight is a soft yellow wash rather than the browser’s default neon, so it reads as an annotation instead of a warning.

content: The highlighted text string or inline nodes.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
background: List of symbols representing the highlight background colors.
rounding: List of symbols representing container boundary radius options.
padding-x: List of symbols controlling left/right padding.
mark-classes: List of additional typography utility classes.

(mark "today")

Procedure: mono content KEY: #:weight #:color #:size #:mono-classes ¶

Create a structural paragraph element wrapped in a monospace text layout.

content: The inner code text string or inline elements.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
mono-classes: List of configuration framework tokens defining a fixed-width layout style.

(mono "$ guix pull")

Procedure: p content KEY: #:weight #:color #:family #:leading #:size ¶

Create an HTML paragraph (<p>) component.

content: The text block or inner nodes rendered inside the paragraph boundaries.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
leading: List of symbols representing line-height spacing CSS classes.
size: List of symbols representing text sizing CSS classes.

(p "This framework focuses on modular, cozy web architectures.")

Procedure: pre content KEY: #:id #:weight #:color #:size #:background #:rounding #:shadow #:width #:leading #:text-wrap #:padding-y #:padding-x #:pre-classes ¶

Create an HTML preformatted multi-line source code container block (<pre>).

content: The raw multi-line string contents to preserve.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
background: List of symbols representing code presentation layout surface background cards.
rounding: List of symbols representing card container boundary radius configurations.
shadow: List of symbols representing card container visual shadow definitions.
width: List of symbols tracking macro dimension constraint rules.
leading: List of symbols processing vertical paragraph text baseline spacing layouts.
text-wrap: List of symbols configuring code boundary line wrapping constraints.
padding-y: List of symbols processing top/bottom container padding margins.
padding-x: List of symbols processing side outer margin boundaries padding options.
pre-classes: List of structural code scrolling mechanisms and whitespace behaviors.
id: An optional HTML identifier, or #f for a <pre> nothing has to name.

(pre "(define (hello)\n  (display \"Hi\"))")

Procedure: samp content KEY: #:weight #:color #:size #:samp-classes ¶

Create an inline HTML <samp> fragment for program output.

samp marks text produced by a computer: a command’s reply, a compiler diagnostic, a log line.

content: The sampled output text string or inline nodes.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
samp-classes: List of typography rules enforcing monospaced output metrics.

(samp "Build succeeded.")

Procedure: strong content KEY: #:weight #:color #:family #:leading #:size ¶

Create an HTML strong importance (<strong>) text fragment.

content: The inner phrase string or inline elements requiring strong visual weight.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
leading: List of symbols representing line-height spacing CSS classes.
size: List of symbols representing text sizing CSS classes.

(strong "Warning: Destructive action ahead!")

Procedure: sub content KEY: #:weight #:color #:size #:vertical #:sub-classes ¶

Create an inline HTML <sub> subscript fragment.

The natural home for chemical formulae and mathematical indices.

content: The subscript text or inline nodes.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
vertical: List of symbols setting the vertical alignment offset.
sub-classes: List of additional typography utility classes.

(p (list "H" (sub "2") "O"))

Procedure: sub-h1 content KEY: #:weight #:color #:family #:style #:size #:leading ¶

Create a lighter, styled secondary <h1> heading wrapper.

content: The inner text string or child elements of the subheading.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
style: List of symbols representing font style layout configuration options (e.g., italic).
size: List of symbols representing text sizing CSS classes.
leading: List of symbols representing the line-height, defaulting to the ratio the heading scale pairs with size.

(sub-h1 "A deeper dive into the architecture")

Procedure: sub-h2 content KEY: #:weight #:style #:color #:family #:size #:leading ¶

Create a lighter, styled secondary <h2> heading wrapper.

content: The inner text string or child elements of the subheading.
weight: List of symbols representing font weight CSS classes.
style: List of symbols representing font style layout configuration options.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.
leading: List of symbols representing the line-height, defaulting to the ratio the heading scale pairs with size.

(sub-h2 "Contextual commentary block")

Procedure: sub-h3 content KEY: #:weight #:style #:color #:family #:size #:leading ¶

Create a lighter, styled secondary <h3> heading wrapper.

content: The inner text string or child elements of the subheading.
weight: List of symbols representing font weight CSS classes.
style: List of symbols representing font style layout configuration options.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.
leading: List of symbols representing the line-height, defaulting to the ratio the heading scale pairs with size.

(sub-h3 "Detailed breakdown notes")

Procedure: sub-h4 content KEY: #:weight #:style #:color #:family #:size #:leading ¶

Create a lighter, styled secondary <h4> heading wrapper.

content: The inner text string or child elements of the subheading.
weight: List of symbols representing font weight CSS classes.
style: List of symbols representing font style layout configuration options.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.
leading: List of symbols representing the line-height, defaulting to the ratio the heading scale pairs with size.

(sub-h4 "Supplemental metadata label")

Procedure: sup content KEY: #:weight #:color #:size #:vertical #:sup-classes ¶

Create an inline HTML <sup> superscript fragment.

Use it for footnote markers, ordinal suffixes and exponents.

content: The superscript text or inline nodes.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
vertical: List of symbols setting the vertical alignment offset.
sup-classes: List of additional typography utility classes.

(p (list "Copyright" (sup "©")))

Procedure: time content KEY: #:datetime #:weight #:color #:size #:time-classes ¶

Create an inline HTML <time> fragment for a machine-readable date.

The datetime attribute carries the value in ISO format (2026-10-11, 2026-10-11T09:30) so that browsers, calendars and crawlers can parse it, while the visible text stays human and locale-appropriate. When content is a string and no datetime is given, the content itself is used.

content: The human-readable date or time string.
datetime: An optional ISO-8601 machine-readable value.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
time-classes: List of typography rules, such as tabular figures for aligned dates.

(time "11 October 2026" #:datetime "2026-10-11")

Procedure: var content KEY: #:weight #:style #:color #:size #:family #:var-classes ¶

Create an inline HTML <var> fragment for a variable or placeholder.

A serif italic var stands out from the surrounding sans-serif text, which is exactly what you want for a name the reader is expected to substitute.

content: The variable name or placeholder text string.
weight: List of symbols representing font weight CSS classes.
style: List of symbols representing text style transformations.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
family: List of symbols representing font family CSS classes.
var-classes: List of additional typography utility classes.

(var "username")