Overview

Structured summary of content

Use the Overview component to guide users through a sequence of steps, lessons, or articles. They improve navigation with a clear overview, making it easier for users to follow progress, and they help them consume information in a step-by-step, categorized manner.

Overview Component
-> Getting Started
5min read
-> Setting up Astro
3min read
-> Integrating Webcore
2min read
Setting Up The Project
-> Imports
1min read
-> CSS Configuration
2min read
-> Using Themes
/

Unlock code

---
import Overview from '@blocks/Overview/Overview.astro'
import { moon, sun } from 'webcoreui/icons'

const overviewItems = [
    { text: 'Overview Component', isTitle: true },
    {
        text: '-> Getting Started',
        subText: '5min read',
        buttons: [{
            text: 'Preview'
        }]
    },
    { text: '-> Setting up Astro', subText: '3min read' },
    { text: '-> Integrating Webcore', subText: '2min read' },
    { text: 'Setting Up The Project', isTitle: true },
    { text: '-> Imports', subText: '1min read' },
    { text: '-> CSS Configuration', subText: '2min read' },
    { text: '-> Using Themes', subText: `${moon}/${sun}` }
]
---

<Overview items={overviewItems} />

The component expects an items prop that expects an array of objects. Each object must have a text property that defines the item text. The rest of the fields are optional, and can be used to display additional details for your steps.

The text and subText properties supports HTML tags, meaning you can add links, format text, or display icons through SVG. You can also add icons to button using the icon property for a buttons object:

Get started with Webcore
Astro Starter
Svelte Starter
React Starter

Unlock code

---
const overviewItems = [
    {
        isTitle: true,
        text: '<span data-tooltip="Get code on Github" data-position="right">Get started with Webcore</span>'
    },
    { text: 'Astro Starter', buttons: [{ text: 'Get code', icon: 'github' }] },
    { text: 'Svelte Starter', buttons: [{ text: 'Get code', icon: 'github' }] },
    { text: 'React Starter', buttons: [{ text: 'Get code', icon: 'github' }] }
]
---

<Overview items={overviewItems} />

The icon property can receive an SVG string, or an icon type for Astro components. Please see the documentation of our Icon component to see available icon types.

Visit the documentation of the tooltip to learn more about how to use tooltips in Webcore.

API

Unlock code

type OverviewProps = {
    items: {
        isTitle?: boolean
        text: string
        buttons?: ({
            text: string
            icon?: IconProps['type'] | string
        } & ButtonProps)[]
        subText?: string
    }[]
    className?: string
    [key: string]: any
}

Please see the documentation of the Icon and Button components for the other types.

Prop	Purpose
`items`	Sets the steps for the overview.
`items.isTitle`	Sets the item as a title, making it possible to visually group items.
`items.text`	Sets the text for the step.
`items.buttons`	Adds buttons next to the step.
`items.buttons.text`	Sets the text for the button.
`items.buttons.icon`	Sets an icon for the button. You can pass SVG strings, or an icon type for Astro components.
`items.subText`	Adds additional text next to buttons.
`className`	Pass additional CSS classes for your `Overview` component.