Section

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Section
  id="id"
  size="default"
  surface="default"
/>

Legacy mount name: data-component="Section".

Props and attributes

Slots

• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Section.wrn

component Section {
  props {
    id = ""
    size = "default"
    surface = "default"
    className = ""
  }
  view {
        <section id="{id}" class="{size === 'compact' ? 'py-10 sm:py-14' : size === 'spacious' ? 'py-20 sm:py-28' : 'py-14 sm:py-20'} {surface === 'muted' ? 'bg-slate-50 dark:bg-slate-900/50' : surface === 'brand' ? 'bg-violet-600 text-white' : ''} {className}">
        <slot />
        </section>
    }
}