Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Section

Page section with optional uppercase label, consistent spacing.

Components Section
layout static
<arc-section>

Overview

Section is a vertical spacing and labeling primitive that wraps a block of page content in consistent padding and an optional uppercase label. It renders a semantic `<section>` element, centers its children at `--max-width`, and applies generous top and bottom padding (`--space-3xl`) that automatically tightens on screens narrower than 768px. Use it to divide a long page into visually distinct bands without manually managing padding or breakpoints. The optional `label` prop renders a small, uppercase, accent-font heading above the slot content. This label uses the `--section-title-weight`, `--section-title-size`, and `--section-title-spacing` tokens, so it stays consistent with every other section label in your application. It is deliberately muted (`--text-muted`) and typeset with `--font-accent` to serve as an orienting waypoint rather than a competing heading. Section sets `scroll-margin-top: var(--space-md)` on its inner wrapper, which means when you link to a section by ID (or pair it with ScrollSpy), the browser scrolls to the right position with breathing room above the sticky nav bar. Combine Section with Container for width-constrained pages, or use it inside full-bleed layouts where the section itself handles horizontal centering.

Guidelines

When to use

  • Use Section to divide landing pages into logical content bands (features, pricing, testimonials)
  • Set the label prop for orientation — it helps users scan the page structure at a glance
  • Give each Section an id attribute so ScrollSpy and anchor links work correctly
  • Pair Section with Container when you need an additional width constraint inside a full-bleed band
  • Keep label text short — one or two words is ideal for uppercase labels

When not to use

  • Do not nest Section inside Section — use a heading or Divider for sub-grouping instead
  • Do not use Section as a generic flex container; it is a vertical spacing and labeling wrapper only
  • Do not override the responsive padding without testing on mobile screens
  • Do not rely on Section for navigation structure — use PageLayout or SettingsLayout instead
  • Do not place form elements directly inside Section without a Container for width constraint

Features

  • Semantic <section> element for accessible document structure
  • Optional uppercase label using `--font-accent` and `--section-title-`* tokens
  • Consistent vertical padding (`--space-3xl`) that tightens on mobile at 768px
  • Automatic horizontal centering at `--max-width` with `--space-lg` inline padding
  • Built-in scroll-margin-top for correct anchor-link positioning under sticky headers
  • Exposed CSS parts (section, label) for targeted ::part() styling
  • Responsive padding reduction via a built-in media query

Preview

What We Offer

A comprehensive set of UI primitives that handle layout, theming, and accessibility out of the box.

Usage

<arc-section label="Features">
  <h2>What We Offer</h2>
  <p>Section content here.</p>
</arc-section>
 
import { Section } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <Section label="Features">
      <h2>What We Offer</h2>
      <p>Section content here.</p>
    </Section>
  );
}
 
<script setup>
import { Section } from '@arclux/arc-ui-vue';
</script>

<template>
  <Section label="Features">
    <h2>What We Offer</h2>
    <p>Section content here.</p>
  </Section>
</template>
 
<script>
  import { Section } from '@arclux/arc-ui-svelte';
</script>

<Section label="Features">
  <h2>What We Offer</h2>
  <p>Section content here.</p>
</Section>
 
import { Component } from '@angular/core';
import { Section } from '@arclux/arc-ui-angular';

@Component({
  imports: [Section],
  template: `
    <arc-section label="Features">
      <h2>What We Offer</h2>
      <p>Section content here.</p>
    </arc-section>
  `,
})
export class MyComponent {}
 
import { Section } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <Section label="Features">
      <h2>What We Offer</h2>
      <p>Section content here.</p>
    </Section>
  );
}
 
import { Section } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <Section label="Features">
      <h2>What We Offer</h2>
      <p>Section content here.</p>
    </Section>
  );
}
 
<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-section — requires section.css + base.css (or arc-ui.css) -->
<div class="arc-section">
  <section class="section">
   Label
   Section
   </section>
</div>
 
<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-section — self-contained, no external CSS needed -->
<style>
  @media (max-width: 768px) {
    .arc-section .section { padding: 64px 16px; }
  }
</style>
<div class="arc-section" style="display: block">
  <section class="section" style="width: 100%; max-width: 1120px; margin-inline: auto; padding: 96px 24px; scroll-margin-top: 16px">
   Label
   Section
   </section>
</div>

API

label string ''
Section label displayed in uppercase above content

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy