Sheet

<pa-sheet> | PaSheet

A container component that provides a consistent background surface with rounded corners and optional elevation shadow. Sheets are used to group related content and create visual hierarchy in your application layout.

Usage

Sheets are ideal for card-like content areas, form sections, content blocks, and any area where you need to visually separate content from the background.

Welcome Back

This is content inside a sheet container. Sheets provide a clean background surface with consistent padding and rounded corners.

<template>
  <pa-sheet>
    <h3>Welcome Back</h3>
    <p>This is content inside a sheet container. Sheets provide a clean background surface with consistent padding and rounded corners.</p>
  </pa-sheet>
</template>

Examples

Basic Sheet

Basic Sheet

A simple sheet with default styling and padding.

<template>
  <pa-sheet>
    <h4>Basic Sheet</h4>
    <p>A simple sheet with default styling and padding.</p>
  </pa-sheet>
</template>

Elevated Sheet

Use the elevate prop to add a subtle shadow for more visual prominence.

Elevated Sheet

This sheet has elevation shadow to make it stand out from the background.

<template>
  <pa-sheet :elevate="true">
    <h4>Elevated Sheet</h4>
    <p>This sheet has elevation shadow to make it stand out from the background.</p>
  </pa-sheet>
</template>

Importing

import { PaSheet } from '@payadvantage/ui-components'

Slots

Name	Description
(default)	The main content area of the sheet.

Properties

Name	Description	Reflects	Type	Default
elevate	Adds shadow elevation for visual prominence.	no	boolean	false

Events

This component does not emit any custom events.

Dependencies

This component has no external dependencies.