hygguile_components_typography (Untitled Document)

1.10 (hygguile components typography)

Procedures

1.10.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: 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: h1 content KEY: #:weight #:color #:family #:size ¶

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.

(h1 "Main Page Title" #:color '(text-stone-900))

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

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.

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

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

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.

(h3 "Subsection Heading")

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

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.

(h4 "Minor Subsection Title")

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: #: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.

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

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-h1 content KEY: #:weight #:color #:family #:style #:size ¶

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.

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

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

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.

(sub-h2 "Contextual commentary block")

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

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.

(sub-h3 "Detailed breakdown notes")

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

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.

(sub-h4 "Supplemental metadata label")