<arc-section label="Features">
  <h2>What We Offer</h2>
  <p>Section content here.</p>
</arc-section>

import { Section } from '@arclux/arc-ui-react';

<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: `
    <Section label="Features">
      <h2>What We Offer</h2>
      <p>Section content here.</p>
    </Section>
  `,
})
export class MyComponent {}

import { Section } from '@arclux/arc-ui-solid';

<Section label="Features">
  <h2>What We Offer</h2>
  <p>Section content here.</p>
</Section>

import { Section } from '@arclux/arc-ui-preact';

<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>