---
title: "Surface"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/fr/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.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

| Classe          | Taper  | Description                                  |
| --------------- | ------ | -------------------------------------------- |
| surface         | Base   | Base surface container                       |
| surface-1       | Style  | Elevation level 1 (subtle)                   |
| surface-2       | Style  | Elevation level 2                            |
| surface-outline | Style  | Remplissage transparent avec bordure visible |
| surface-dashed  | Style  | Style de bordure en pointillés               |
| surface-rounded | Style  | Moderately rounded corners                   |
| surface-xs      | Taille | Rembourrage très petit                       |
| surface-sm      | Taille | Petit rembourrage                            |
| surface-md      | Taille | Rembourrage moyen (par défaut)               |
| surface-lg      | Taille | Grand rembourrage                            |
| surface-xl      | Taille | Rembourrage extra large                      |

## Utilisation de base

## 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>
```