# GovBB Frontend

This is the documentation for the frontend of the Government of Barbados website.
It contains a collection of components, utilities, pages and other assets for building frontend applications using the [GOVBB Design System](https://github.com/GovTechBB/design-system). The CSS examples are written in HTML.

## Install

Available on npm as [`@govtech-bb/styles`](https://www.npmjs.com/package/@govtech-bb/styles), published under the `alpha` dist-tag.

```sh
pnpm add @govtech-bb/styles@alpha
```

```html
<link rel="stylesheet" href="/node_modules/@govtech-bb/styles/dist/styles.css" />
```

Or use the unpkg CDN with no install (pin a version):

```html
<link rel="stylesheet" href="https://unpkg.com/@govtech-bb/styles@1.0.0-alpha.16/dist/styles.css" />
```

Or with a JS/TS bundler:

```ts
import "@govtech-bb/styles";
```

Assets (fonts, images):

- Bundler import: `@govtech-bb/styles/assets/<path>` (resolved via the package `exports` map).
- CDN / direct URL (unpkg, raw `node_modules` link): `@govtech-bb/styles/dist/assets/<path>` — `exports` is ignored when files are served by path, so the real `dist/assets/...` path is required.

## Components

- [Breadcrumbs](https://govtech-bb.github.io/design-system/llm/components/breadcrumbs.md) — trail of links showing a user's position in a hierarchy.
- [Button](https://govtech-bb.github.io/design-system/llm/components/button.md) — trigger actions; primary, secondary, destructive, tertiary, and link variants.
- [Checkbox](https://govtech-bb.github.io/design-system/llm/components/checkbox.md) — pick any number of options from a list.
- [Date input](https://govtech-bb.github.io/design-system/llm/components/date-input.md) — three short fields for day, month, and year.
- [Error message](https://govtech-bb.github.io/design-system/llm/components/error-message.md) — inline message explaining what went wrong on a field.
- [Error summary](https://govtech-bb.github.io/design-system/llm/components/error-summary.md) — top-of-page list linking to every field with an error.
- [Fieldset](https://govtech-bb.github.io/design-system/llm/components/fieldset.md) — groups controls that answer the same question.
- [File upload](https://govtech-bb.github.io/design-system/llm/components/file-upload.md) — dropzone for attaching files.
- [Footer](https://govtech-bb.github.io/design-system/llm/components/footer.md) — dark blue site footer with supporting links and crest.
- [Form group](https://govtech-bb.github.io/design-system/llm/components/form-group.md) — container for one question: label, hint, error, control.
- [Header](https://govtech-bb.github.io/design-system/llm/components/header.md) — yellow site header with logo and navigation.
- [Hint](https://govtech-bb.github.io/design-system/llm/components/hint.md) — short helper text that explains what a field expects.
- [Input](https://govtech-bb.github.io/design-system/llm/components/input.md) — single-line text input.
- [Label](https://govtech-bb.github.io/design-system/llm/components/label.md) — names the field it sits above.
- [Number input](https://govtech-bb.github.io/design-system/llm/components/number-input.md) — number field with visible +/- steppers.
- [Official banner](https://govtech-bb.github.io/design-system/llm/components/official-banner.md) — thin bar confirming this is a real government service.
- [Radio](https://govtech-bb.github.io/design-system/llm/components/radio.md) — pick exactly one option from a short list.
- [Search](https://govtech-bb.github.io/design-system/llm/components/search.md) — search field paired with a submit button.
- [Select](https://govtech-bb.github.io/design-system/llm/components/select.md) — dropdown for picking one option from a long list.
- [Show/hide](https://govtech-bb.github.io/design-system/llm/components/show-hide.md) — disclosure that reveals secondary content on demand.
- [Status banner](https://govtech-bb.github.io/design-system/llm/components/status-banner.md) — coloured strip indicating alpha, beta, migrated, or disruption.
- [Textarea](https://govtech-bb.github.io/design-system/llm/components/textarea.md) — multi-line text input for longer answers.

## Blocks

App-specific compositions built on top of the components. Not shipped in the base stylesheet.

- [Feedback box](https://govtech-bb.github.io/design-system/llm/blocks/feedback-box.md) — yellow callout asking users for page feedback.
- [Filter](https://govtech-bb.github.io/design-system/llm/blocks/filter.md) — collapsible filter panel with checkbox groups and an apply button.
- [Freshness](https://govtech-bb.github.io/design-system/llm/blocks/freshness.md) — "last updated" meta strip for content pages.
- [Payment](https://govtech-bb.github.io/design-system/llm/blocks/payment.md) — payment summary card with default, success, and failed states.

## Templates

Full-page examples showing how components and blocks compose into real services. Starting points to copy and adapt.

- [Category](https://govtech-bb.github.io/design-system/llm/templates/category.md) — category landing page listing services under a theme.
- [Home](https://govtech-bb.github.io/design-system/llm/templates/home.md) — site homepage with top-level entry points.
- [Multiple questions](https://govtech-bb.github.io/design-system/llm/templates/multiple-questions.md) — form page asking several related questions at once.
- [Service](https://govtech-bb.github.io/design-system/llm/templates/service.md) — long-form service guide with overview, steps, and contact details.
- [Single question](https://govtech-bb.github.io/design-system/llm/templates/single-question.md) — form page asking one question with Back and Continue actions.