Inset

Padding primitive consuming spacing tokens with optional negative-margin bleed mode.

Components

Inset

layout

static

<arc-inset>

Overview

Inset is a spacing primitive that applies consistent padding to its children using design system spacing tokens. It is the padding counterpart to Stack (which handles vertical spacing between siblings), where Stack controls the gaps between elements and Inset controls the space around a block of content. The `space` prop maps directly to spacing tokens (xs through 2xl), so padding stays in sync with the design system whether the Inset wraps a card body, a section interior, or a dialog content area. The `bleed` prop activates negative-margin mode, which allows the Inset's children to break out of a parent's existing padding. This is useful when you have a padded container but want a specific child, like a full-width image or a divider, to extend edge-to-edge. Bleed applies a negative margin equal to the space value, effectively canceling the parent's padding for that element.

Guidelines

When to use

Use Inset for card body padding, dialog content areas, and section interiors
Use space="lg" or space="xl" for primary content areas; space="sm" for compact UI
Use bleed mode to make full-width images or dividers extend past parent padding
Combine with Stack for interior layouts: Inset for padding, Stack for vertical spacing
Prefer Inset over custom padding styles to maintain token-based consistency

When not to use

Do not use Inset as a substitute for Container. Container constrains width; Inset adds padding
Do not nest Inset inside Inset unless you intentionally want compound padding
Do not use bleed mode without a padded parent. Negative margins will misalign content
Do not use Inset for spacing between sibling elements. Use Stack or gap utilities instead
Do not hardcode pixel values; adjust the spacing tokens globally instead

Features

Consistent padding via design system spacing tokens (xs through 2xl)
Bleed mode with negative margins to break out of parent padding
Maps directly to `--space-xs`, `--space-sm`, `--space-md`, `--space-lg`, `--space-xl`, `--space-2xl` tokens
Lightweight wrapper with zero JavaScript overhead
Composable with Stack, Container, and other layout primitives
CSS part: `inset` for targeted ::part() styling

Preview

Inset space="lg" — 24px padding

Inset space="sm" — 8px padding

Inset space="xl" — 32px padding

Usage

<arc-card>
  <arc-inset space="lg">
    <h3>Card Title</h3>
    <p>Content with consistent padding from the Inset primitive.</p>
  </arc-inset>
</arc-card>

<!-- Bleed mode: image breaks out of parent padding -->
<arc-inset space="lg">
  <p>Padded content above</p>
  <arc-inset bleed>
    <img src="/hero.jpg" alt="Full-width hero" style="width:100%">
  </arc-inset>
  <p>Padded content below</p>
</arc-inset>

import { Inset, Card } from '@arclux/arc-ui-react';

function CardWithInset() {
  return (
    <Card>
      <Inset space="lg">
        <h3>Card Title</h3>
        <p>Content with consistent padding.</p>
      </Inset>
    </Card>
  );
}

// Bleed mode
function BleedExample() {
  return (
    <Inset space="lg">
      <p>Padded content above</p>
      <Inset bleed>
        <img src="/hero.jpg" alt="Full-width hero" style={{ width: '100%' }} />
      </Inset>
      <p>Padded content below</p>
    </Inset>
  );
}

<script setup>
import { Inset, Card } from '@arclux/arc-ui-vue';
</script>

<template>
  <Card>
    <Inset space="lg">
      <h3>Card Title</h3>
      <p>Content with consistent padding.</p>
    </Inset>
  </Card>

  <!-- Bleed mode -->
  <Inset space="lg">
    <p>Padded content above</p>
    <Inset bleed>
      <img src="/hero.jpg" alt="Full-width hero" style="width:100%">
    </Inset>
    <p>Padded content below</p>
  </Inset>
</template>

<script>
  import { Inset, Card } from '@arclux/arc-ui-svelte';
</script>

<Card>
  <Inset space="lg">
    <h3>Card Title</h3>
    <p>Content with consistent padding.</p>
  </Inset>
</Card>

<!-- Bleed mode -->
<Inset space="lg">
  <p>Padded content above</p>
  <Inset bleed>
    <img src="/hero.jpg" alt="Full-width hero" style="width:100%">
  </Inset>
  <p>Padded content below</p>
</Inset>

import { Component } from '@angular/core';
import { Inset, Card } from '@arclux/arc-ui-angular';

@Component({
  imports: [Inset, Card],
  template: `
    <arc-card>
      <arc-inset space="lg">
        <h3>Card Title</h3>
        <p>Content with consistent padding.</p>
      </arc-inset>
    </arc-card>

    <!-- Bleed mode -->
    <arc-inset space="lg">
      <p>Padded content above</p>
      <arc-inset bleed>
        <img src="/hero.jpg" alt="Full-width hero" style="width:100%">
      </arc-inset>
      <p>Padded content below</p>
    </arc-inset>
  `,
})
export class InsetExampleComponent {}

import { Inset, Card } from '@arclux/arc-ui-solid';

function CardWithInset() {
  return (
    <Card>
      <Inset space="lg">
        <h3>Card Title</h3>
        <p>Content with consistent padding.</p>
      </Inset>
    </Card>
  );
}

import { Inset, Card } from '@arclux/arc-ui-preact';

function CardWithInset() {
  return (
    <Card>
      <Inset space="lg">
        <h3>Card Title</h3>
        <p>Content with consistent padding.</p>
      </Inset>
    </Card>
  );
}

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-inset — requires inset.css + base.css (or arc-ui.css) -->
<div class="arc-inset">
  Inset
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-inset — self-contained, no external CSS needed -->
<div class="arc-inset" style="display: block; padding: 16px">
  Inset
</div>

API

space'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'='md': Padding size mapped to a design system spacing token. Controls all four sides equally.
bleedboolean=false: When true, applies negative margins equal to the space value, allowing children to break out of a parent container's padding for full-bleed layouts.

Inset

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight