---
title: Div & Span
description: Unstyled block and inline containers for custom layouts and inline text.
icon: square-dashed
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

Div and Span are unstyled primitives — the escape hatches for when Row, Column, and Grid don't express what you need. Both support `css_class` for Tailwind and `style` for arbitrary inline CSS.

## Div

A block container with no default styling. Style it through `css_class` or `style`:

<ComponentPreview json={{"view":{"cssClass":"flex items-center gap-3 rounded-lg border p-4","type":"Div","children":[{"cssClass":"bg-emerald-500 rounded-md h-8 w-8","type":"Div"},{"content":"Custom layout with Div","type":"P"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgRGl2LAogICAgUCwKKQoKd2l0aCBEaXYoY3NzX2NsYXNzPSJmbGV4IGl0ZW1zLWNlbnRlciBnYXAtMyByb3VuZGVkLWxnIGJvcmRlciBwLTQiKToKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbWQgaC04IHctOCIpCiAgICBQKCJDdXN0b20gbGF5b3V0IHdpdGggRGl2IikK">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Div,
    P,
)

with Div(css_class="flex items-center gap-3 rounded-lg border p-4"):
    Div(css_class="bg-emerald-500 rounded-md h-8 w-8")
    P("Custom layout with Div")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "flex items-center gap-3 rounded-lg border p-4",
    "type": "Div",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-8 w-8", "type": "Div"},
      {"content": "Custom layout with Div", "type": "P"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

For CSS that Tailwind can't express — vendor prefixes, `clamp()`, `mask-image`, etc. — use the `style` prop:

<ComponentPreview json={{"view":{"type":"Div","style":{"background":"linear-gradient(135deg, #667eea 0%, #764ba2 100%)","border-radius":"12px","padding":"24px"},"children":[{"cssClass":"text-white font-medium","content":"Styled with inline CSS","type":"P"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgRGl2LAogICAgUCwKKQoKd2l0aCBEaXYoc3R5bGU9ewogICAgImJhY2tncm91bmQiOiAibGluZWFyLWdyYWRpZW50KDEzNWRlZywgIzY2N2VlYSAwJSwgIzc2NGJhMiAxMDAlKSIsCiAgICAiYm9yZGVyLXJhZGl1cyI6ICIxMnB4IiwKICAgICJwYWRkaW5nIjogIjI0cHgiLAp9KToKICAgIFAoIlN0eWxlZCB3aXRoIGlubGluZSBDU1MiLCBjc3NfY2xhc3M9InRleHQtd2hpdGUgZm9udC1tZWRpdW0iKQo=">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Div,
    P,
)

with Div(style={
    "background": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
    "border-radius": "12px",
    "padding": "24px",
}):
    P("Styled with inline CSS", css_class="text-white font-medium")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Div",
    "style": {
      "background": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
      "border-radius": "12px",
      "padding": "24px"
    },
    "children": [
      {
        "cssClass": "text-white font-medium",
        "content": "Styled with inline CSS",
        "type": "P"
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Span

An inline text element with no default styling. Useful for inline annotations or colored text:

<ComponentPreview json={{"view":{"cssClass":"gap-2 items-baseline","type":"Row","children":[{"content":"Status:","type":"P"},{"cssClass":"text-sm text-success font-medium","type":"Span","content":"Online"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgUCwKICAgIFJvdywKICAgIFNwYW4sCikKCndpdGggUm93KGdhcD0yLCBhbGlnbj0iYmFzZWxpbmUiKToKICAgIFAoIlN0YXR1czoiKQogICAgU3BhbigiT25saW5lIiwgY3NzX2NsYXNzPSJ0ZXh0LXNtIHRleHQtc3VjY2VzcyBmb250LW1lZGl1bSIpCg==">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    P,
    Row,
    Span,
)

with Row(gap=2, align="baseline"):
    P("Status:")
    Span("Online", css_class="text-sm text-success font-medium")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-2 items-baseline",
    "type": "Row",
    "children": [
      {"content": "Status:", "type": "P"},
      {
        "cssClass": "text-sm text-success font-medium",
        "type": "Span",
        "content": "Online"
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Div Parameters">
<ParamField body="css_class" type="str | None" default="None">
  Tailwind CSS classes. Div has no built-in styling.
</ParamField>

<ParamField body="style" type="dict[str, str] | None" default="None">
  Inline CSS styles for properties that Tailwind can't express.
</ParamField>
</Card>

<Card icon="code" title="Span Parameters">
<ParamField body="content" type="str" required>
  Text content. Can be passed as a positional argument.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Tailwind CSS classes. Span has no built-in styling.
</ParamField>

<ParamField body="style" type="dict[str, str] | None" default="None">
  Inline CSS styles for properties that Tailwind can't express.
</ParamField>
</Card>

## Protocol Reference

```json Div
{
  "type": "Div",
  "children?": "[Component]",
  "let?": "object",
  "style?": "object",
  "cssClass?": "string"
}
```

```json Span
{
  "type": "Span",
  "content": "string (required)",
  "style?": "object",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Div](/protocol/div), [Span](/protocol/span).
