Horbit Styling
The hb- class names, CSS variables, and how to override any of it.
Horbit gives you two layers, and you can use either, both or neither.
- The stylesheet at
/v1/public/blog/styles.css— the workspace's theme (set in Blog settings → Appearance) plus base rules for every class. - The class names on every element — style them however your site is built.
<link rel="stylesheet" href="https://api.horbit.ng/v1/public/blog/styles.css?key=hpk_…" />The stylesheet never fights you
Every rule weighs exactly one class: the .hb-content scope sits inside :where(), which counts for nothing.
That is enough to beat a CSS reset (Tailwind's preflight, normalize.css), and little enough that your own rule wins
when your stylesheet loads after ours — or whenever you add one more class. No !important needed.
/* loaded after styles.css — this wins */
.hb-quote__body { font-style: italic; }
/* or scope to your layout — two classes always win */
.post .hb-heading--h2 { text-transform: uppercase; }Re-theme with variables
The quickest restyle is to set variables on .hb-content:
.hb-content {
--hb-accent: #e11d48;
--hb-font: "Source Serif 4", Georgia, serif;
--hb-heading-font: Inter, sans-serif;
--hb-font-size: 19px;
--hb-content-width: 680px;
--hb-image-radius: 4px;
}| Variable | Controls |
|---|---|
--hb-accent | Buttons, quote rules, callouts, highlights |
--hb-text-color, --hb-heading-color, --hb-link-color, --hb-muted-color | Text colours |
--hb-border-color, --hb-surface-color | Rules, tables, soft backgrounds |
--hb-code-background, --hb-code-color | Code blocks |
--hb-font, --hb-heading-font, --hb-mono-font | Font stacks |
--hb-font-size, --hb-line-height | Body type |
--hb-h2-size, --hb-h3-size, --hb-h4-size | Heading sizes |
--hb-content-width, --hb-wide-width | The text column and "wide" blocks |
--hb-image-radius, --hb-button-radius | Corners |
--hb-block-spacing, --hb-column-gap | Rhythm |
Class reference
Names follow BEM: hb-{block}, hb-{block}--{modifier}, hb-{block}__{part}.
| Element | Classes |
|---|---|
| Whole body | .hb-content |
| Row / column | .hb-row .hb-row--cols-2 .hb-row--width-{content,wide,full} · .hb-row__inner · .hb-col .hb-col--span-6 |
| Every block | .hb-block, plus data-block-type and data-block-id |
| Heading | .hb-heading .hb-heading--h2 (with an id for anchors) |
| Text | .hb-text .hb-text--drop-cap · .hb-paragraph · .hb-link · .hb-list .hb-list--bullet .hb-list__item · .hb-blockquote · .hb-inline-code · .hb-pre · .hb-table |
| Image | .hb-image .hb-image--align-{left,center,right,wide,full} · .hb-image__img · .hb-image__caption |
| Gallery | .hb-gallery .hb-gallery--cols-3 .hb-gallery--crop · .hb-gallery__grid · .hb-gallery__item · .hb-gallery__img |
| Quote | .hb-quote .hb-quote--pull · .hb-quote__body · .hb-quote__text · .hb-quote__cite |
| Code | .hb-code · .hb-code__filename · .hb-code__pre · .hb-code__code.language-{lang} |
| Button | .hb-button · .hb-button__link .hb-button__link--{primary,secondary,outline} |
| Callout | .hb-callout .hb-callout--{info,success,warning,danger,note} · .hb-callout__title · .hb-callout__body |
| Embed | .hb-embed .hb-embed--youtube .hb-embed--aspect-16-9 · .hb-embed__frame · .hb-embed__iframe |
| Divider / spacer | .hb-divider .hb-divider--{line,dashed,dots} · .hb-spacer |
| Contents | .hb-toc · .hb-toc__list · .hb-toc__item--h3 · .hb-toc__link |
| Comment bodies | .hb-comment__paragraph (inside the bodyHtml the comments endpoint returns) |
Writers can add their own classes and anchors to any block from the editor's Advanced panel, so a post can carry hooks like .lead for your stylesheet.
Bring your own styles entirely
Skip the stylesheet and target the classes from scratch. Nothing in the HTML depends on it — without it, posts fall back to your site's base typography.