Back to site

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.

---
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 checked iconName="null" subtext="null" title="Overview">
    <Heading alignmentHorizontal="start" level="h2">
      Overview
    </Heading>
    <Text alignmentHorizontal="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 alignmentHorizontal="start" level="h2">
      Details
    </Heading>
    <Text alignmentHorizontal="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 alignmentHorizontal="start" level="h2">
      Next steps
    </Heading>
    <Text alignmentHorizontal="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
          alignmentHorizontal: 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.
          alignmentHorizontal: start
          size: md
    - title: Details
      subtext: null
      iconName: null
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Details
          level: h2
          alignmentHorizontal: 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.
          alignmentHorizontal: start
          size: md
    - title: Next steps
      subtext: null
      iconName: null
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Next steps
          level: h2
          alignmentHorizontal: 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.
          alignmentHorizontal: 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 #

Frequently asked questions

Do you offer support? Yes — email us anytime.

Can I cancel? Yes, you can cancel anytime.

---
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
          alignmentHorizontal: start
        - _component: building-blocks/core-elements/text
          text: |
            **Do you offer support?** Yes — email us anytime.

            **Can I cancel?** Yes, you can cancel anytime.
          alignmentHorizontal: 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.
          alignmentHorizontal: 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
          alignmentHorizontal: 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.
          alignmentHorizontal: start
          size: md
        - _component: building-blocks/core-elements/text
          text: Start a return
          link: null
          variant: secondary
          size: md
---

Frequently asked questions

Do you offer support? Yes — email us anytime.

Can I cancel? Yes, you can cancel anytime.

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

            **Can I cancel?** Yes, you can cancel anytime.
          alignmentHorizontal: 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.
          alignmentHorizontal: 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
          alignmentHorizontal: 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.
          alignmentHorizontal: start
          size: md
        - _component: building-blocks/core-elements/text
          text: Start a return
          link: null
          variant: secondary
          size: md
---

Icon Colors #

Follow these steps to get up and running quickly.

---
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 checked iconColor="blue" iconName="rocket-launch" subtext="Quick setup guide" title="Getting Started">
    <Text alignmentHorizontal="start" size="md">
      <p>Follow these steps to get up and running quickly.</p>
    </Text>
  </ContentSelectorPanel>
  <ContentSelectorPanel iconColor="purple" iconName="sparkles" subtext="What's included" title="Features">
    <Text alignmentHorizontal="start" size="md">
      <p>Explore everything included out of the box.</p>
    </Text>
  </ContentSelectorPanel>
  <ContentSelectorPanel iconColor="green" iconName="lifebuoy" subtext="Get help" title="Support">
    <Text alignmentHorizontal="start" size="md">
      <p>Reach out to our team for assistance.</p>
    </Text>
  </ContentSelectorPanel>
</ContentSelector>
---
blocks:
  _component: building-blocks/wrappers/content-selector
  navigationPosition: start
  items:
    - title: Getting Started
      subtext: Quick setup guide
      iconName: rocket-launch
      iconColor: blue
      contentSections:
        - _component: building-blocks/core-elements/text
          text: Follow these steps to get up and running quickly.
          alignmentHorizontal: start
          size: md
    - title: Features
      subtext: What's included
      iconName: sparkles
      iconColor: purple
      contentSections:
        - _component: building-blocks/core-elements/text
          text: Explore everything included out of the box.
          alignmentHorizontal: start
          size: md
    - title: Support
      subtext: Get help
      iconName: lifebuoy
      iconColor: green
      contentSections:
        - _component: building-blocks/core-elements/text
          text: Reach out to our team for assistance.
          alignmentHorizontal: start
          size: md
---