Section
Page section with optional uppercase label, consistent spacing.
<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 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 muted (--text-muted) and typeset with --font-accent so it orients the reader without competing with a heading.
Section sets scroll-margin-top: var(--space-md) on its inner wrapper, so when you link to a section by ID (or pair it with ScrollSpy), the browser scrolls to the right position, leaving 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
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
labelstring''- Section label displayed in uppercase above content
See Also
- ContainerMax-width wrapper for page sections.
- DividerHorizontal rule with multiple visual styles from subtle to glowing.
- Page LayoutPage structure primitive that arranges content into sidebar-left, sidebar-right, centered, or wide layouts using CSS Grid. Handles responsive collapse, configurable gap and max-width, and exposes named slots for sidebar, main, and aside regions.