Utility classes reference

Krafter provides tk-* utility classes that automatically wire CSS design tokens to standard resume elements. Use these class names in your Handlebars HTML — your template CSS then only needs to override what makes it visually distinct, using [data-template] specificity.

Header classes

• tk-header — header container. Sets bottom margin from --space-section. Built-in templates override this for alignment (Hunza: centered, Skardu/Deosai: left-aligned) or background colour (Naltar: accent band).
• tk-resume-name — full name. Wires --size-display, --weight-display, --font-display, --transform-display, --color-display. Skardu adds an accent underline via ::after; Rakaposhi colours the name from the accent scale in the sidebar.
• tk-subtitle — job title / headline. Wires --size-subtitle. Templates often override the colour — Deosai and Passu use the accent colour, Naltar uses white.
• tk-contact — contact info row. Wires --size-subtitle, line-height: 1.3. Templates override for muted colour or stacked layout in sidebars.
• tk-contact-item — individual contact field. Add data-type="phone|email|location" for type-specific styling.
• tk-links — links row. Wires --size-subtitle, line-height: 1.3. Links inside get underline and offset by default.
• tk-link — individual link. Wires --color-link and text-decoration: underline.
• tk-separator — separator between inline items. In contact/links rows: renders ::after content as a pipe (|) with 3pt padding. In tag lists: renders as comma + space. Templates can hide (display: none) or change the separator character.

Section classes

• tk-section-heading — section heading. Wires --size-label, --weight-label, --font-heading, --transform-label, --variant-label, --tracking-label, --color-label. The most commonly overridden class — Skardu adds a left border, Hunza adds letter-spacing, Deosai/Passu hide it for summary sections.
• tk-section-heading-rule — separator element below the heading. Wires --rule-display, --rule-style, --rule-height, --rule-width, --color-rule. Hidden by default (display: none). Skardu hides it permanently (uses border-left on headings instead). Rakaposhi hides it in the sidebar.
• tk-section-content — content wrapper. Wires --size-body. Separators inside use comma-space by default.

History item classes

• tk-history-item — history entry container. No default styles — templates add borders (Skardu: left-border timeline), padding, or position for timeline dots (Deosai).
• tk-history-gap — added to non-first items. Sets margin-top: var(--space-item, 10pt) for vertical spacing between items.
• tk-item-header — title + date row. Flex layout with space-between alignment. When date position is inline, switches to flex-start with a gap.
• tk-item-title — item title (company, school). Wires --size-heading, bold by default. Links inside get --color-link and underline.
• tk-item-subtitle — detail row. Wires --size-detail, italic, bottom margin from --space-item-header. Most templates override the colour to a muted grey.
• tk-item-date — date / duration. Wires --size-body, right-aligned, italic, no-shrink. Skardu overrides to light weight and muted colour.
• tk-item-link-icon — external link arrow. 0.75em size, 2pt left margin.
• tk-item-body — description body container. No default styles — combine with tk-rich-text for Tiptap HTML output.

Rich text & body classes

• tk-rich-text — wraps Tiptap HTML. Resets p margins, sets list styles and indentation, and wires link colour from --color-link.
• tk-body — body text. Wires --size-body and --leading (line-height).

Tag & badge classes

• tk-tag-list — wrapping flex container for tags. display: flex, flex-wrap: wrap.
• tk-badge — tag/skill badge text. Wires --size-badge.

Reference classes

• tk-reference — reference entry. Adjacent references get margin-top: var(--space-item) for spacing.
• tk-reference-name — person's name. Bold by default. Skardu overrides to semibold; Rakaposhi uses white in the sidebar.
• tk-reference-detail — job title & company. Italic by default. Skardu removes the italic.
• tk-reference-contact — phone & email. Wires --size-body. Skardu and Rakaposhi override to muted grey.

Two-column layout classes

These are used by multi-column built-in templates (Rakaposhi, Passu). Community templates are single-column only.

• tk-two-col — column wrapper. display: flex, min-height: 100%.
• tk-sidebar — sidebar column. Width from --sidebar-width (default 35%). Rakaposhi styles this with a dark background and light text.
• tk-main — main content column. flex: 1.

How to override

Your template CSS overrides tk-* defaults using the [data-template] selector for higher specificity. The utility classes use .resume .tk-* (one class); your override uses .resume[data-template="..."] .tk-* (one class + one attribute), which naturally wins.

/* Default: .resume .tk-section-heading { color: var(--color-label); } */

/* Your override — wins via higher specificity */
.resume[data-template="my-template"] .tk-section-heading {
  border-left: 3px solid var(--color-accent);
  padding-left: 8pt;
}