# Card > A box that groups content that belongs together. A CSS component with two classes and no JavaScript. A frame around content that belongs together, such as one case in a list of cases. The card is a container, not a component with behaviour: the content decides what the user can do. ## How to use it **Plain HTML** ```html ``` ```html

Housing benefit application

Sent 4 March. Case number 2026-0481.

Approved

Nursery place application

We need a birth certificate before we can process the application.

``` **TypeScript** ```ts import "@lo-tek/interfaces/tokens.css" import "@lo-tek/interfaces/card.css" import "@lo-tek/interfaces/badge.css" import "@lo-tek/interfaces/button.css" ``` `lt` is used in two ways, and which one depends on whether you create the element or find it. **If you create the markup,** spread the attributes in. That is the way in React, Astro and anything else that renders: ```tsx import { lt } from "@lo-tek/interfaces/react"

Application 2024/1187

In progress.

``` The import is from `/react` here, since the block is JSX. From there the keys are `className` and `htmlFor`. In Astro and anything else without React, import `@lo-tek/interfaces` and you get `class` and `for`. **If you have the element in a variable,** set them on it with `setAttributes`. That is the way without JSX, whether you just created the element or found it in a page the server sent: ```ts import { lt } from "@lo-tek/interfaces" const card = document.createElement("a") card.href = `/case/${caseFile.id}` lt.setAttributes(card, lt.card({ interactive: true })) ``` `lt.card.title` gives the class for the heading. See [Type-safe use](/type-safe-use.md). | `data-variant` | Used for | | - | - | | *(omitted)* | Outline on the page surface. The default. | | `filled` | Muted surface, when the card should stand out from white without a border | ## The whole card as a link **Plain HTML** ```html

See the whole case

All documents, messages and decisions in one place.

 ``` `data-interactive` gives hover and a focus indicator, but makes nothing clickable on its own. The element has to be an `` or a `