Lumos

https://lumosframework.com/docs
Admin
Lumos is an open-source component and styling framework for Astro that provides design tokens,...
Tokens:38,311
Snippets:353
Trust Score:3.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Example .astro file with frontmatter and markup

Source: https://lumosframework.com/docs/project-structure

Shows the two-part structure of an .astro file: frontmatter (imports and setup) above the dashes, and markup below. The example imports layout and component files and renders a simple About page.

```astro
---
import BaseLayout from "@/layouts/BaseLayout.astro";
import Section from "@/components/Section.astro";
import Heading from "@/components/Heading.astro";
import Paragraph from "@/components/Paragraph.astro";
---

<BaseLayout title="About">
  <Section>
    <Heading tag="h1">About us</Heading>
    <Paragraph>We make things.</Paragraph>
  </Section>
</BaseLayout>
```

--------------------------------

### Select component usage examples

Source: https://lumosframework.com/docs/components/select

Demonstrates basic usage with custom options, the month variant, and a configured year range.

```astro
<Select label="Plan" options={["Free", "Pro", "Team"]} />

<Select variant="month" />
<Select variant="year" from={1950} to={2026} />
```

--------------------------------

### Button Theming

Source: https://lumosframework.com/docs/components/button

Example showing how a button inherits colors from the nearest theme.

```astro
<Section theme="brand">
  <Button>Readable here too</Button>
</Section>
```

--------------------------------

### Basic Input Usage

Source: https://lumosframework.com/docs/components/input

Examples of using the Input component with different variants and custom labels.

```astro
<Input variant="email" required />
<Input variant="phone" />
<Input label="Company" />
```

--------------------------------

### BaseLayout usage example

Source: https://lumosframework.com/docs/components/base-head

Example of passing metadata props to the BaseLayout component.

```astro
<BaseLayout
  title="About"
  description="Who we are and what we make."
  image="/og/about.jpg"
>
```

--------------------------------

### Basic AccordionItem Usage

Source: https://lumosframework.com/docs/components/accordion-item

An example of how to implement an AccordionItem with a specified heading and content.

```astro
<AccordionItem heading="What do you need from me?" headingTag="h3">
  <Paragraph>Copy, images, and someone who can make decisions.</Paragraph>
</AccordionItem>
```

--------------------------------

### Basic Button Usage

Source: https://lumosframework.com/docs/components/button

Examples of primary, secondary, and link buttons using the Button component.

```astro
<Button>Primary</Button>
<Button emphasis="secondary">Secondary</Button>
<Button variant="link" element="link" href="/docs">Link</Button>
```

--------------------------------

### Text over media with Overlay

Source: https://lumosframework.com/docs/components/overlay

Example of using the Overlay component with a gradient variant at 70% strength to ensure text readability over an image.

```astro
<Img src={visual} class="cover" />
<Overlay variant="gradient" strength={70} />
<Heading tag="h3">Text over media</Heading>
```

--------------------------------

### Basic Accordion usage

Source: https://lumosframework.com/docs/components/accordion

An example of an Accordion component with the openFirst prop enabled, containing multiple AccordionItem entries.

```astro
<Accordion openFirst>
  <AccordionItem heading="How long does it take?">
    <Paragraph>Usually four to six weeks.</Paragraph>
  </AccordionItem>
  <AccordionItem heading="What do you need from me?">
    <Paragraph>Copy, images, and someone who can make decisions.</Paragraph>
  </AccordionItem>
</Accordion>
```

--------------------------------

### Grid with xsmall={2} medium={4}

Source: https://lumosframework.com/docs/concepts/layout

Use the Grid component to lay out repeated items such as cards, logos, or team members. Set a column count per breakpoint (xsmall and medium here) and the sizes between them follow the nearest one below. The second block is the copyable one-line version of the same example.

```astro
<Grid xsmall={2} medium={4}>
  <Card heading="One" />
  <Card heading="Two" />
</Grid>
```

```astro
<Grid xsmall={2} medium={4}> <Card heading="One" /> <Card heading="Two" /> </Grid>
```

--------------------------------

### Choice usage example

Source: https://lumosframework.com/docs/components/choice

Shows a standalone checkbox and a radio group inside a Fieldset. Radios require the name prop to group them and enable arrow-key navigation.

```astro
<Choice label="Email me about new releases" />

<Fieldset legend="How often?" variant="inline">
  <Choice type="radio" name="cadence" label="Weekly" value="weekly" checked />
  <Choice type="radio" name="cadence" label="Monthly" value="monthly" />
</Fieldset>
```

--------------------------------

### Use theme prop on Section and Card

Source: https://lumosframework.com/docs/concepts/theming

Section, BaseLayout, and Card take a theme prop. This example shows a dark section with a brand card inside it.

```astro
<Section theme="dark">
  <Heading tag="h2">On a dark surface</Heading>
  <Card theme="brand" heading="And a brand card inside it" />
</Section>
```

--------------------------------

### Section component example

Source: https://lumosframework.com/docs/concepts/layout

A Section with dark theme and large top padding, medium bottom padding, containing a Heading. The container is automatic, so you never add one yourself.

```astro
<Section theme="dark" paddingTop="large" paddingBottom="medium">
  <Heading tag="h2">Everything here is centred and capped</Heading>
</Section>
```

--------------------------------

### ContentWrapper variant="columns" with column2 slot

Source: https://lumosframework.com/docs/concepts/layout

Use the columns variant to place the default slot in the first column and the column2 slot in the second. Below the medium breakpoint (64rem) the two columns stack. The second block is the copyable one-line version of the same example.

```astro
<ContentWrapper variant="columns">
  <Heading tag="h3">Two columns</Heading>
  <Paragraph>The first column holds the default slot.</Paragraph>
  <Img slot="column2" src={visual} />
</ContentWrapper>
```

```astro
<ContentWrapper variant="columns"> <Heading tag="h3">Two columns</Heading> <Paragraph>The first column holds the default slot.</Paragraph> <Img slot="column2" src={visual} /> </ContentWrapper>
```

--------------------------------

### Preview the build locally

Source: https://lumosframework.com/docs/guides/deploying

Serve the contents of the dist folder locally to verify the production output before deployment.

```bash
npm run preview
```

--------------------------------

### Build the project

Source: https://lumosframework.com/docs/guides/deploying

Run the build command to generate the finished site files in the dist folder.

```bash
npm run build
```

--------------------------------

### Create the project with npm create lumos@latest

Source: https://lumosframework.com/docs/installation

Scaffolds a new Lumos project named 'my-site' in the current directory.

```bash
npm create lumos@latest my-site
```

--------------------------------

### Mark-only Button Variants

Source: https://lumosframework.com/docs/components/button

Examples of mark-only buttons including play, close, and arrow variants.

```astro
<Button variant="play" />
<Button variant="play" pressed />
<Button variant="close" />
<Button variant="arrow" direction="back" />
<Button variant="arrow" />
```

--------------------------------

### Navigate to a folder

Source: https://lumosframework.com/docs/installation

Change to the directory where you want to create the Lumos project.

```bash
cd ~/Documents
```

--------------------------------

### Background Video with Overlay

Source: https://lumosframework.com/docs/components/video

Places a video in a Section's background slot, fills the band, and pairs with an Overlay for text readability. The video ignores mouse events.

```astro
<Section theme="dark">
  <Video slot="background" src="/loop.mp4" class="cover" />
  <Overlay slot="background" strength={60} />
  <Heading tag="h1" variant="display">Over the video</Heading>
</Section>
```

--------------------------------

### Paragraph usage example

Source: https://lumosframework.com/docs/components/paragraph

Renders a large paragraph with a maxWidth of 38 ch units. The tag defaults to 'p' and the variant is set to 'large'.

```astro
<Paragraph variant="large" maxWidth={38}>
  A lead paragraph, capped at a comfortable measure.
</Paragraph>
```

--------------------------------

### Open Modal with Button and Form

Source: https://lumosframework.com/docs/components/modal

Shows how to open a Modal using a Button with data-modal-open attribute and include a Form inside. The Modal requires an id prop; without it, nothing is rendered and a console warning appears in development.

```astro
<Button data-modal-open="enquire">Get in touch</Button>

<Modal id="enquire" label="Enquiry form">
  <Form action="/api/contact">
    <Input variant="email" required />
    <Button type="submit">Send</Button>
  </Form>
</Modal>
```

--------------------------------

### Use theme class directly on a div

Source: https://lumosframework.com/docs/concepts/theming

Anywhere else, use the class directly. It is just CSS. This example uses theme-invert to contrast with whatever surrounds it.

```astro
<div class="theme-invert padding-5 radius-main">
  Contrasts with whatever surrounds it.
</div>
```

--------------------------------

### Basic Video Usage

Source: https://lumosframework.com/docs/components/video

Renders a video with a fixed aspect ratio using the '16-9' variant. The src and poster attributes are set to example paths.

```astro
<Video src="/showreel.mp4" poster="/showreel-still.jpg" variant="16-9" />
```

--------------------------------

### Fill in project details in src/consts.ts

Source: https://lumosframework.com/docs/installation

Open src/consts.ts and replace the placeholder values with your own site name, description, and URL.

```typescript
export const SITE_NAME = "My Studio";
export const SITE_DESCRIPTION =
  "A studio that makes things.";
export const SITE_URL = "https://example.com";
```

--------------------------------

### Import and use Icon component

Source: https://lumosframework.com/docs/components/icon

Import the Icon component and an SVG file, then render the icon with a specified variant.

```astro
---
import Icon from "@/components/Icon.astro";
import arrow from "@/assets/icons/arrow.svg";
---

<Icon src={arrow} variant="small" />
```

--------------------------------

### Full page example: src/pages/index.astro

Source: https://lumosframework.com/docs/concepts/layout

Shows a complete Astro page using the Lumos layout system. It imports BaseLayout, Section, ContentWrapper, Grid, Heading, Paragraph, and Card components, then composes a dark-themed home page with a hero section, a two-column light section, and a responsive grid of cards. The second block is a copy of the same code in a single line, likely for quick copying.

```astro
---
import BaseLayout from "@/layouts/BaseLayout.astro";
import Section from "@/components/Section.astro";
import ContentWrapper from "@/components/ContentWrapper.astro";
import Grid from "@/components/Grid.astro";
import Heading from "@/components/Heading.astro";
import Paragraph from "@/components/Paragraph.astro";
import Card from "@/components/Card.astro";
---

<BaseLayout title="Home" theme="dark">
  <Section paddingTop="large">
    <Heading tag="h1" variant="display">A headline</Heading>
    <Paragraph variant="large" maxWidth={38}>A sentence under it.</Paragraph>
  </Section>

  <Section theme="light">
    <ContentWrapper variant="columns">
      <Heading tag="h2">Two columns</Heading>
      <Paragraph>Text on the left, a visual on the right.</Paragraph>
      <Img slot="column2" src={photo} alt="" />
    </ContentWrapper>
  </Section>

  <Section>
    <Grid xsmall={1} medium={3}>
      <Card heading="One" text="…" />
      <Card heading="Two" text="…" />
      <Card heading="Three" text="…" />
    </Grid>
  </Section>
</BaseLayout>
```

```astro
--- import BaseLayout from "@/layouts/BaseLayout.astro"; import Section from "@/components/Section.astro"; import ContentWrapper from "@/components/ContentWrapper.astro"; import Grid from "@/components/Grid.astro"; import Heading from "@/components/Heading.astro"; import Paragraph from "@/components/Paragraph.astro"; import Card from "@/components/Card.astro"; --- <BaseLayout title="Home" theme="dark"> <Section paddingTop="large"> <Heading tag="h1" variant="display">A headline</Heading> <Paragraph variant="large" maxWidth={38}>A sentence under it.</Paragraph> </Section> <Section theme="light"> <ContentWrapper variant="columns"> <Heading tag="h2">Two columns</Heading> <Paragraph>Text on the left, a visual on the right.</Paragraph> <Img slot="column2" src={photo} alt="" /> </ContentWrapper> </Section> <Section> <Grid xsmall={1} medium={3}> <Card heading="One" text="…" /> <Card heading="Two" text="…" /> <Card heading="Three" text="…" /> </Grid> </Section> </BaseLayout>
```

--------------------------------

### Grid with xsmall and medium columns

Source: https://lumosframework.com/docs/components/grid

Sets two columns below 48rem and four from 48rem up. The `xsmall` prop is the base for all larger sizes.

```astro
<Grid xsmall={2} medium={4}>
  <div>1</div>
  <div>2</div>
</Grid>
```

--------------------------------

### Basic Dropdown usage

Source: https://lumosframework.com/docs/components/dropdown

A standard implementation of the Dropdown component containing a list of links.

```astro
<Dropdown label="Resources">
  <ul>
    <li><a href="/guides">Guides</a></li>
    <li><a href="/support">Support</a></li>
  </ul>
</Dropdown>
```

--------------------------------

### Card Component List Implementation

Source: https://lumosframework.com/docs/components/card

Shows how to render a list of cards using a <ul> element with the display-contents class and role="listitem" for accessibility.

```astro
<Grid xsmall={1} medium={3}>
  <ul class="display-contents">
    {posts.map((post) => (
      <Card role="listitem" heading={post.title} text={post.excerpt} />
    ))}
  </ul>
</Grid>
```

--------------------------------

### Basic Tabs implementation

Source: https://lumosframework.com/docs/components/tabs

A standard implementation of the Tabs component using the links slot for navigation and ContentWrapper components for panel content.

```astro
<Tabs>
  <Fragment slot="links">
    <TabLink>Strategy</TabLink>
    <TabLink>Design</TabLink>
    <TabLink>Development</TabLink>
  </Fragment>

  <ContentWrapper>…strategy…</ContentWrapper>
  <ContentWrapper>…design…</ContentWrapper>
  <ContentWrapper>…development…</ContentWrapper>
</Tabs>
```

--------------------------------

### Basic Slider implementation

Source: https://lumosframework.com/docs/components/slider

A standard Slider usage showing responsive slide counts for different screen sizes and a descriptive label.

```astro
<Slider xsmall={1.02} medium={2} large={3} label="Recent work">
  <Card heading="Northwind" … />
  <Card heading="Lantern" … />
  <Card heading="Fieldnote" … />
</Slider>
```

--------------------------------

### Basic Heading tags

Source: https://lumosframework.com/docs/components/heading

Renders headings with different levels using the tag prop. The variant defaults to match the tag, so only tag is needed for standard headings.

```astro
<Heading tag="h2">Heading two</Heading>
<Heading tag="h3">Heading three</Heading>
<Heading tag="h4">Heading four</Heading>
```

--------------------------------

### Grid with custom gap utility

Source: https://lumosframework.com/docs/components/grid

Overrides the default site gutter gap on a single grid using a `gap-*` utility class.

```astro
<Grid xsmall={2} class="gap-2">
```

--------------------------------

### Two columns layout

Source: https://lumosframework.com/docs/components/content-wrapper

Arranges content into two equal columns that stack when the viewport is below 64rem. The default slot populates the first column, while the column2 slot populates the second.

```astro
<ContentWrapper variant="columns">
  <Heading tag="h3" variant="h4">Two columns</Heading>
  <Paragraph>The first column holds the default slot.</Paragraph>
  <Img slot="column2" src={visual} />
</ContentWrapper>
```
Tokens:
Raw