This page is a live reference for the current HUFLAW Blogger theme. It demonstrates headings, body text, links, lists, buttons, forms, tables, figures, image handling, and the variable-driven visual system used by the theme.

It is built only with classes that are intentionally supported by the current theme skin. Use this page as the reference sheet when creating custom Pages, legal content, landing pages, and author resources.

Authoring principles

Use the theme-defined classes first

Prefer the classes documented on this page. They are part of the HUFLAW skin and are safer than relying on random Bootstrap classes that only work because a legacy stylesheet is still loaded.

Use muted text carefully

Use text-secondary only for genuinely secondary text. For normal body copy on light surfaces, use regular paragraph text so dark mode and light mode stay readable without extra fixes.

Typography and links

Heading Level 1 — Theme Title Preview

Heading Level 2 — Section Preview

Heading Level 3 — Subsection Preview

Heading Level 4 — Minor Heading Preview

Heading Level 5 — Utility Heading Preview
Heading Level 6 — Small Heading Preview

This is a standard paragraph showing the current body font, text color, line-height, and inline element rendering. Here is an example link, some strong text, some emphasized text, and a small text sample.

This blockquote demonstrates the current blockquote accent color and general spacing behavior in the theme.

HUFLAW Theme Style Sheet example

Lists and linked content blocks

Unordered list

  • Primary site styles should inherit from theme variables.
  • List markers should remain readable against the current body background.
  • Nested list example
    • Nested item one
    • Nested item two

Ordered list

  1. Open the Blogger theme editor.
  2. Adjust the variable values.
  3. Review this page to confirm the visual changes.

Linked resource cards

Homepage Tests block link spacing, borders, and default link behavior inside a card. Class Definitions Tests card-contained link styling and readable supporting text. Contact Tests simple linked blocks without relying on unsupported list-group classes.

Buttons and icons

These examples use the button classes that are directly supported by the current theme. The examples below use Bootstrap Icons because they are already loaded in the theme head.

Primary Action Preview Download

Icon examples

  • bi bi-sun
  • bi bi-moon
  • bi bi-check2
  • bi bi-eye
  • bi bi-download

Usage note

For important actions, use jt-btn-primary. For softer UI actions, use jt-btn-light. For a lighter visual treatment that still keeps the action visible, use jt-btn-outline-primary.

Form controls

Table example

Element What to review Controlled by
Body text Font family, size, color, readability body.text, body.text.color
Headings Font family, weight, heading scale posts.title, title.h1–title.h6
Links Default and hover colors body.link.color, body.hover.color
Buttons Primary and hover treatment posts.icons.color, labels.background.color
Cards and dividers Border visibility and separation border.color

Image manipulation and media handling

The theme supports three main image patterns. Use a normal responsive image when you want the original aspect ratio to remain visible. Use a ratio wrapper with object-cover when you want a fixed crop such as 4:3 or 1:1. Use figure and figcaption when an image needs a caption.

Natural image, no crop

Sandra Dank and Peter Hufendiek
This pattern keeps the image responsive and preserves its native proportions.
<img class="w-100 rounded shadow-sm" src="IMAGE-URL" alt="Description">

Fixed 4:3 crop

Cropped 4:3 image example

Use this when you want a stable card or hero image frame. The image fills the box and will crop as needed. 

<div class="ratio ratio-4x3 rounded overflow-hidden shadow-sm">
  <img class="object-cover" src="IMAGE-URL" alt="Description">
</div>

Square thumbnail

Square logo example 
<div class="ratio ratio-1x1 rounded overflow-hidden">
  <img class="object-cover" src="IMAGE-URL" alt="Description">
</div>

Image handling notes

  • w-100 makes the image responsive.
  • ratio plus a ratio class creates a fixed media frame.
  • object-cover crops the image so the frame is always filled.
  • Remove object-cover when you need to avoid cropping.
  • rounded, overflow-hidden, and shadow-sm create finished media cards.
  • Use figure and figcaption when the image needs editorial context.

Variable groups

Group Example variables Purpose
Global global.radius.sm, global.shadow.sm, global.text.size General radius, shadow, text size, and border system
Header Extended header.shadow, header.icon.size, header.menu.letterspacing Header shadow, icon sizing, and menu feel
Main main.bg, main.text, main.card.bg, main.card.border Main content colors, card styling, and widget spacing
Aside aside.bg, aside.text, aside.width Sidebar appearance and desktop width
Footer Extended footer.text.size.scale, footer.widget.gap, footer.rule.color Footer spacing, scaling, and section rule color
Buttons Extended button.text, button.radius, button.padding.y Button text color, radius, and padding
Brand brand.primary, keycolor, body.background Core brand palette and canvas colors
Typography body.text, posts.title, tabs.font, title.h1–title.h6 Body font, heading font, menu font, and heading scale
Sizing container.width, header.height, logo.width Container width, section rhythm, header height, and logo sizing
Header header.bg, header.color, header.border Header background, text, and border treatment
Menu tabs.color, tabs.hover, tabs.selected.color Main navigation states
Dropdown Menu dropdown.font, dropdown.bg, dropdown.color Dropdown panel size and colors
Footer footer.bg, footer.color, footer.link Footer background, copy, and link colors
Socket socket.bg, socket.color Bottom socket bar colors
Buttons posts.icons.color, labels.background.color Primary action color and hover state

Theme editor checklist

Use this checklist when testing changes in the Blogger theme editor.

What the user wants to change Change this variable What to review on this page
Main accent color keycolor Accent rules, buttons, link hovers, and icon emphasis
Page background color body.background Main canvas behind all content sections
Default paragraph text color body.text.color Body copy and readability
Heading color posts.title.color Headings, table headers, labels, and emphasis points
Body font family body.text Paragraphs, lists, labels, and forms
Heading font family posts.title All heading levels
Heading sizes title.h1–title.h6 Heading scale from H1 to H6
Card and border color border.color Section frames, table rules, image frames, and card outlines
Button color posts.icons.color Primary buttons and emphasized actions
Button hover color labels.background.color Hovered button state
Header appearance header.bg, header.color, header.border Global site header, not just this page
Menu appearance tabs.font, tabs.color, tabs.hover Main site navigation, not just this page
Dropdown appearance dropdown.font, dropdown.bg, dropdown.color Header dropdown menu sizing and contrast
Logo size logo.width, logo.width.mobile Global header logo on desktop and mobile
Container width container.width Overall line length and page width