---
title: "Introduction"
description: "solstice-ui is a Nuxt module of headless content blocks and a page frame for Eclipse Foundation working group websites on Nuxt Content and Nuxt Studio."
canonical_url: "http://localhost:3000/getting-started/introduction"
---
# Introduction

> solstice-ui is a Nuxt module of headless content blocks and a page frame for Eclipse Foundation working group websites on Nuxt Content and Nuxt Studio.

solstice-ui is a Nuxt module (to be published as `@eclipsefdn/solstice-ui`) for websites built with [Nuxt Content](https://content.nuxt.com) and edited with [Nuxt Studio](https://nuxt.studio). Pages are Markdown files made of **blocks** (`::hero`, `::page-section`, `::card`, `::grid`…) that editors insert and rearrange in Studio's visual editor, and that people and agents write by hand in MDC.

It provides:

<u-page-grid className="my-6">
<u-page-card description="Page headers, sections, cards and grids, tabs, accordions and lists, text and media, buttons and links, and live data, written in MDC." icon="i-lucide-blocks" title="Blocks for whole pages" to="http://localhost:3000/components">



</u-page-card>

<u-page-card description="Text in slots, options as selects, images in the visual editor, the blocks in Studio's / menu, by group." icon="i-lucide-square-pen" title="Made for Nuxt Studio" to="http://localhost:3000/writing-pages/nuxt-studio">



</u-page-card>

<u-page-card description="The site's theme gives the blocks their classes, their looks (the values of their look options) and their motion." icon="i-lucide-palette" title="Headless, themed by the site" to="http://localhost:3000/getting-started/theme/class-maps">



</u-page-card>

<u-page-card description="The header and footer, the page that renders every content page, breadcrumbs, a page header and a sidebar column." icon="i-lucide-layout-template" title="Site layout and page frame" to="http://localhost:3000/getting-started/theme/layout-and-frame">



</u-page-card>

<u-page-card description="Meta tags, social media images, RSS feeds, sitemap, redirects, page visibility and editors-only pages." icon="i-lucide-globe" title="SEO, feeds and Studio pages" to="http://localhost:3000/getting-started/configuration">



</u-page-card>

<u-page-card description="The newsroom's news and events, the members, cookie consent, YouTube, HubSpot, motion and colour modes, as optional features." icon="i-lucide-puzzle" title="Eclipse services" to="http://localhost:3000/getting-started/features">



</u-page-card>
</u-page-grid>

## Concepts

### Blocks

A block is a Vue component written in MDC, the Markdown syntax of Nuxt Content: `::name{options}` opens it, `::` closes it, and blocks nest with more colons. Each block has a page in [Components](http://localhost:3000/components).

```mdc
::page-section
  :::grid
    ::::card
    ### Participate

    Join the discussions and the task forces.
    ::::
  :::

#title
Get involved
::
```

### Slots

Everything that is text goes in a block's **slots**: its content (the default slot), and named parts such as `#title`, `#intro`, `#media`, `#actions` or `#footer`. Editors write it in the visual editor; options never hold text. See [Slots and options](http://localhost:3000/writing-pages/slots-and-options).

### Options

A block's **options** configure it: a link (`href`), a number of columns, a position, a look. There are two kinds:

- **behaviour options** change what the block does or how it lays out its content (`columns`, `media-position`, `href`, `count`): their values are the module's;
- **look options** change only its look (`variant`, `color`, `size`, `background`, `gap`): their values are the **site's theme's**. Each site offers the looks its theme defines, and no others.

### The site's theme

The blocks are **headless**: they render semantic markup and behaviour, and take every class from the site's theme, a class map per component in a folder of the site, with its own stylesheet. The module ships no classes, tokens or stylesheet. Another look is another theme folder, not other components. See [Theming](http://localhost:3000/getting-started/theme/class-maps).

## These docs

These pages are the module's documentation, shown with a site's theme:

- the text, the examples' MDC and the options' names are the module's, the same for every site;
- the examples render with the site's theme, the options tables list the values of the site's theme (its look options are marked **theme**), and each block's **Theme** section shows its looks in that theme, with the site's notes on them.

A site's documentation adds its own pages (its theme, its own blocks, how its pages are built) and can replace any page of the module's: see [Documenting a theme](http://localhost:3000/getting-started/theme/documenting-a-theme). The same pages are available to agents as Markdown: see [AI agents](http://localhost:3000/getting-started/agents/markdown).


## Sitemap

See the full [sitemap](http://localhost:3000/sitemap.md) for all pages.