Inset — ARC UI

Components

Inset

layout

static

<arc-inset>

Overview

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: `
    <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>
  `,
})
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>
  );
}

<!-- See HTML tab after running pnpm generate -->
<div class="arc-inset">...</div>

<!-- See HTML (Inline) tab after running pnpm generate -->
<div class="arc-inset" style="padding:var(--space-md)">...</div>

API

Prop	Type	Default	Description
`space`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'md'`	Padding size mapped to a design system spacing token. Controls all four sides equally.
`bleed`	`boolean`	`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.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight