Content Selector

Lets users switch between different content panels using tabs.

Overview

Details

Next steps

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

<ContentSelector
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.\n",
          "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.\n",
          "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.\n",
          "alignX": "start",
          "size": "md"
        }
      ]
    }
  ]
} label="" navigationPosition="start"
/>

---
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 multiple content panels within a tabbed interface. Each item includes a title and content area. Supports configurable tab navigation positions (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:

_component string | default: building-blocks/wrappers/content-selector/content-selector-item

title string | default: Section Title

The heading for the content panel.

contentSections array | default: array

navigationPosition enum | default: start

Accepted values:

start
top

Examples

Navigation Position

---
import Button from "@core-elements/button/Button.astro";
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";
---

<ContentSelector
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.\n\n**Can I cancel?** Yes, you can cancel anytime.\n",
          "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.\nDelivery times vary by region.\n",
          "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/button",
          "text": "Start a return",
          "link": null,
          "variant": "secondary",
          "size": "md"
        }
      ]
    }
  ]
} navigationPosition="top"
/>

---
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/button
          text: Start a return
          link: null
          variant: secondary
          size: md
---

---
import Button from "@core-elements/button/Button.astro";
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";
---

<ContentSelector
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.\n\n**Can I cancel?** Yes, you can cancel anytime.\n",
          "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.\nDelivery times vary by region.\n",
          "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/button",
          "text": "Start a return",
          "link": null,
          "variant": "secondary",
          "size": "md"
        }
      ]
    }
  ]
} navigationPosition="start"
/>

---
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/button
          text: Start a return
          link: null
          variant: secondary
          size: md
---