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

Typical work includes planning, setup, and ongoing support. Projects are delivered on time with straightforward steps and simple options.

Next steps

Reach out for a quick estimate or to discuss what's needed. Responses are friendly and prompt.

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

---
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 icon_name="question-mark-circle" sub_text="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 icon_name="truck" sub_text="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 icon_name="arrow-path" sub_text="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
      sub_text: Common questions
      icon_name: 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
      sub_text: How we deliver
      icon_name: 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
      sub_text: Easy and fair
      icon_name: 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
---

---
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="start">
  <ContentSelectorPanel icon_name="question-mark-circle" sub_text="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 icon_name="truck" sub_text="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 icon_name="arrow-path" sub_text="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: start
  items:
    - title: FAQ
      sub_text: Common questions
      icon_name: 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
      sub_text: How we deliver
      icon_name: 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
      sub_text: Easy and fair
      icon_name: 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
---