Components
Every component exists twice: as CSS classes in @monk-business/css (usable from any HTML) and as an Astro component in @monk-business/astro that renders that HTML with accessible defaults. The pages show live examples rendered with the real Astro components, on the dark and the light surface.
| Component | Astro | CSS block |
|---|---|---|
| Button | Button |
mb-btn |
| Tag | Tag |
mb-tag, mb-tag-list |
| SectionHeading | SectionHeading, Eyebrow |
mb-section-heading, mb-eyebrow |
| Card | Card, CardGrid |
mb-card, mb-card-grid |
| FormField | Field, Checkbox |
mb-field, mb-input, mb-select, mb-textarea, mb-check |
| Notice | Notice |
mb-notice |
| SiteHeader | SiteHeader |
mb-header, mb-nav, mb-lang |
| SiteFooter | SiteFooter |
mb-footer |
| Hero | Hero |
mb-hero |
| ChatWidget | (CSS only) | mb-chat, mb-chat-launcher, mb-msg, mb-lead-card, mb-contact-card |
| Layout | Section, Container |
mb-section, mb-container, mb-prose, mb-stack, mb-row |
| Logo | Logo |
mb-logo |
| Orbit and K mark | Orbit, KMark, Eyebrow |
mb-orbit, mb-kmark |
How they are built
Section titled “How they are built”- Tokens only. The CSS reads
--mb-*variables and nothing else, so every component follows the theme of its surroundings (.theme-light,[data-theme]) with no extra classes. A test fails the build if a raw color appears. - Cascade layers.
mb.base(document defaults, focus ring, reduced motion),mb.componentsandmb.utilities(type scale,mb-sr-only, stack and row). Unlayered application CSS always wins. - BEM names with the
mb-prefix: blockmb-card, elementmb-card__link, modifiermb-btn--primary. - Size containers. The header, footer and hero respond to their own width (container queries), so they work in any column.
- No client JavaScript. The phone menu is a native
<details>element; behavior such as the chat belongs to the application. - Accessible markup. Landmarks with labels,
aria-currentfor the current page, labels on every control, errors linked witharia-describedby,aria-disabledfor unavailable buttons, decorative graphics hidden from assistive technology.
Shared conventions
Section titled “Shared conventions”- Props that accept text are plain strings; slots take markup when you need links or emphasis.
- Every component accepts
class; most also pass other HTML attributes (id,aria-*,data-*) to their root element. - Default labels are in Brazilian Portuguese (“Saiba mais”, “(opcional)”, “Principal”, “(abre em nova aba)”); pass your own for other languages.