---
title: "Surface"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Surface for layered content containers and visual depth hierarchy. Multiple elevation levels and shapes for card alternatives and nested layouts."
url: https://frutjam.com/components/surface
---

# Surface Component

 Surface components are versatile layout primitives that create layered visual hierarchies and content containers. Built with semantic HTML, surfaces provide flexible depth and styling options. The Frutjam surface system supports multiple sizes, shapes, and layers—ideal for card alternatives, content blocks, and nested layouts.

| Class           | Type  | Description                            |
| --------------- | ----- | -------------------------------------- |
| surface         | Base  | Base surface container                 |
| surface-1       | Style | Elevation level 1 (subtle)             |
| surface-2       | Style | Elevation level 2                      |
| surface-outline | Style | Transparent fill with a visible border |
| surface-dashed  | Style | Dashed border style                    |
| surface-rounded | Style | Moderately rounded corners             |
| surface-xs      | Size  | Extra small padding                    |
| surface-sm      | Size  | Small padding                          |
| surface-md      | Size  | Medium padding (default)               |
| surface-lg      | Size  | Large padding                          |
| surface-xl      | Size  | Extra large padding                    |

## Basic Usage

## Surface Layers

Use `surface-1` and `surface-2` to create depth hierarchy by mixing the base color with the foreground color.

```html
<div class="surface p-4">Base</div>
<div class="surface surface-1 p-4">Surface 1 — subtle lift</div>
<div class="surface surface-2 p-4">Surface 2 — more contrast</div>
```


## Surface Shapes

```html
<div class="surface surface-md">Default (square)</div>
<div class="surface surface-md surface-rounded">Rounded</div>
```


## Border Styles

Use `surface-outline` or `surface-dashed` for transparent containers defined by a border. These work correctly when nested inside colored layers because the background is explicitly transparent.

```html
<div class="surface surface-1 surface-rounded surface-md">
  <p class="mb-3 font-medium">Surface 1 (colored parent)</p>
  <div class="flex gap-3">
    <div class="surface surface-outline surface-rounded surface-sm grow">Outline — transparent fill, solid border</div>
    <div class="surface surface-dashed surface-rounded surface-sm grow">Dashed — transparent fill, dashed border</div>
  </div>
</div>
```


## Surface Sizes

Size utilities set the internal padding via `--surface--padding`. Do not combine with Tailwind `p-*` utilities—they will override the variable and defeat the size class.

```html
<div class="surface surface-xs surface-rounded">Extra small (0.5rem)</div>
<div class="surface surface-sm surface-rounded">Small (1rem)</div>
<div class="surface surface-md surface-rounded">Medium (1.5rem)</div>
<div class="surface surface-lg surface-rounded">Large (2rem)</div>
<div class="surface surface-xl surface-rounded">Extra large (2.5rem)</div>
```


## Nested Surfaces

```html
<div class="surface surface-1 p-6 rounded-lg">
  <h3>Outer Surface</h3>
  <div class="surface surface-2 p-4 rounded mt-4">
    <p>Inner Surface</p>
  </div>
</div>
```