Placeholder

The Placeholder component displays a content placeholder with customizable size and height.

Demo

React

VariantSubtleSolid

Text

A placeholder block

Vue

VariantSubtleSolid

Text

A placeholder block

Example

React

// Import component
import { Placeholder } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/placeholder.css';

return (
  <Placeholder
    variant="solid"
    className="h-20"
  >
    A placeholder block
  </Placeholder>
);

Vue

<script setup lang="ts">
// Import component
import { Placeholder } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/placeholder.css';
</script>

<template>
  <Placeholder
    variant="solid"
    class="h-20"
  >
    A placeholder block
  </Placeholder>
</template>

Props

Name	Type	Default	Description
variant	PlaceholderVariant	subtle	Variant of the placeholder

Types

type PlaceholderVariant = 'subtle' | 'solid'