Content Selector

Lets users switch between different content panels using tabs.

Overview

A small, service‑focused business offering practical help for everyday needs. Clear communication, fair pricing, and dependable results.

Details

Next steps

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import ContentSelector from "@wrappers/content-selector/ContentSelector.astro";
import ContentSelectorPanel from "@wrappers/content-selector/ContentSelectorPanel.astro";
---

<ContentSelector label="" navigationPosition="start">
  <ContentSelectorPanel iconName="null" subtext="null" title="Overview">
    <Heading alignX="start" level="h2">
      Overview
    </Heading>
    <Text alignX="start" size="md">
      <p>A small, service‑focused business offering practical help for everyday needs. Clear communication, fair pricing, and dependable results.</p>
    </Text>
  </ContentSelectorPanel>
  <ContentSelectorPanel iconName="null" subtext="null" title="Details">
    <Heading alignX="start" level="h2">
      Details
    </Heading>
    <Text alignX="start" size="md">
      <p>Typical work includes planning, setup, and ongoing support. Projects are delivered on time with straightforward steps and simple options.</p>
    </Text>
  </ContentSelectorPanel>
  <ContentSelectorPanel iconName="null" subtext="null" title="Next steps">
    <Heading alignX="start" level="h2">
      Next steps
    </Heading>
    <Text alignX="start" size="md">
      <p>Reach out for a quick estimate or to discuss what's needed. Responses are friendly and prompt.</p>
    </Text>
  </ContentSelectorPanel>
</ContentSelector>

---
blocks:
  _component: building-blocks/wrappers/content-selector
  navigationPosition: start
  items:
    - title: Overview
      subtext: null
      iconName: null
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Overview
          level: h2
          alignX: start
        - _component: building-blocks/core-elements/text
          text: |
            A small, service‑focused business offering practical help for everyday needs. Clear communication, fair pricing, and dependable results.
          alignX: start
          size: md
    - title: Details
      subtext: null
      iconName: null
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Details
          level: h2
          alignX: start
        - _component: building-blocks/core-elements/text
          text: |
            Typical work includes planning, setup, and ongoing support. Projects are delivered on time with straightforward steps and simple options.
          alignX: start
          size: md
    - title: Next steps
      subtext: null
      iconName: null
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Next steps
          level: h2
          alignX: start
        - _component: building-blocks/core-elements/text
          text: |
            Reach out for a quick estimate or to discuss what's needed. Responses are friendly and prompt.
          alignX: start
          size: md
  label: ''
---

Overview

Displays content panels in CSS-only tabs. Supports slot-based composition with ContentSelectorPanel children and items fallback, with navigation positions at top or start.

Properties

label string

Optional label for the content selector to help identify it in the editor.

items array | default: array

Item Properties:

title string | default: Section Title

The heading for the content panel.

contentSections array | default: array

navigationPosition enum | default: start

Accepted values:

start
top

Slots

default

The tab items inside the selector. Used only when the items property is not set.

Child Component:

<ContentSelectorPanel>

Properties (documented under the items property above):

title
contentSections/slot

Examples

Navigation Position

FAQ

Common questions

Frequently asked questions

Do you offer support? Yes — email us anytime.

Can I cancel? Yes, you can cancel anytime.

Shipping

How we deliver

Returns

Easy and fair

---
import Heading from "@core-elements/heading/Heading.astro";
import List from "@core-elements/list/List.astro";
import ListItem from "@core-elements/list/ListItem.astro";
import Text from "@core-elements/text/Text.astro";
import ContentSelector from "@wrappers/content-selector/ContentSelector.astro";
import ContentSelectorPanel from "@wrappers/content-selector/ContentSelectorPanel.astro";
---

<ContentSelector navigationPosition="top">
  <ContentSelectorPanel iconName="question-mark-circle" subtext="Common questions" title="FAQ">
    <Heading alignX="start" level="h2">
      Frequently asked questions
    </Heading>
    <Text alignX="start" size="md">
      <p><strong>Do you offer support?</strong> Yes — email us anytime.</p>
      <p><strong>Can I cancel?</strong> Yes, you can cancel anytime.</p>
    </Text>
  </ContentSelectorPanel>
  <ContentSelectorPanel iconName="truck" subtext="How we deliver" title="Shipping">
    <Text alignX="start" size="md">
      <p>We ship worldwide. Orders leave within 2 business days.
        Delivery times vary by region.</p>
    </Text>
    <List alignX="start" direction="vertical" size="md">
      <ListItem iconName="clock">NZ &amp; AU: 2–5 days</ListItem>
      <ListItem iconName="globe-alt">US &amp; EU: 5–10 days</ListItem>
    </List>
  </ContentSelectorPanel>
  <ContentSelectorPanel iconName="arrow-path" subtext="Easy and fair" title="Returns">
    <Text alignX="start" size="md">
      <p>30‑day returns. Unused items only. Full refund once received.</p>
    </Text>
    <Text link="null" size="md" variant="secondary">
      <p>Start a return</p>
    </Text>
  </ContentSelectorPanel>
</ContentSelector>

---
blocks:
  _component: building-blocks/wrappers/content-selector
  navigationPosition: top
  items:
    - title: FAQ
      subtext: Common questions
      iconName: question-mark-circle
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Frequently asked questions
          level: h2
          alignX: start
        - _component: building-blocks/core-elements/text
          text: |
            **Do you offer support?** Yes — email us anytime.

            **Can I cancel?** Yes, you can cancel anytime.
          alignX: start
          size: md
    - title: Shipping
      subtext: How we deliver
      iconName: truck
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |
            We ship worldwide. Orders leave within 2 business days.
            Delivery times vary by region.
          alignX: start
          size: md
        - _component: building-blocks/core-elements/list
          items:
            - text: 'NZ & AU: 2–5 days'
              iconName: clock
            - text: 'US & EU: 5–10 days'
              iconName: globe-alt
          direction: vertical
          alignX: start
          size: md
    - title: Returns
      subtext: Easy and fair
      iconName: arrow-path
      contentSections:
        - _component: building-blocks/core-elements/text
          text: 30‑day returns. Unused items only. Full refund once received.
          alignX: start
          size: md
        - _component: building-blocks/core-elements/text
          text: Start a return
          link: null
          variant: secondary
          size: md
---

FAQ