Skip to main content
Frutjam logo Frutjam
v2.2.1
Theme

Surface Component

A versatile surface component built with Tailwind CSS for creating layered visual hierarchies and content containers. Structure content with multiple depth layers from base to elevated surfaces. Supports rounded shapes for flexible card alternatives and nested layout primitives.

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
surfaceBaseBase surface container
surface-1StyleElevation level 1 (subtle)
surface-2StyleElevation level 2
surface-outlineStyleTransparent fill with a visible border
surface-dashedStyleDashed border style
surface-roundedStyleModerately rounded corners
surface-xsSizeExtra small padding
surface-smSizeSmall padding
surface-mdSizeMedium padding (default)
surface-lgSizeLarge padding
surface-xlSizeExtra large padding

Basic Usage

Surface Container

Content displayed on a surface

1
2
3
4
<div class="surface p-6">
  <h2>Surface Container</h2>
  <p>Content displayed on a surface</p>
</div>

1
2
3
4
<div className="surface p-6">
  <h2>Surface Container</h2>
  <p>Content displayed on a surface</p>
</div>

Surface Layers

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

Base
Surface 1 — subtle lift
Surface 2 — more contrast
html 
1
2
3
<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

Default (square)
Rounded
html 
1
2
<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.

Surface 1 (colored parent)

Outline — transparent fill, solid border
Dashed — transparent fill, dashed border
html 
1
2
3
4
5
6
7
<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.

Extra small (0.5rem)
Small (1rem)
Medium (1.5rem)
Large (2rem)
Extra large (2.5rem)
html 
1
2
3
4
5
<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

Outer Surface

Inner Surface

html 
1
2
3
4
5
6
<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>