Higher-Level Components
Composite components for common showcase patterns — section headers, stepped lists, service accordions, and fullscreen sliders.
These components combine Crystal primitives into ready-to-use patterns for portfolio sites and landing pages.
CrystalSectionHeader
A standardized section header with eyebrow label, heading, and optional description.
Open in Storybook→import { CrystalSectionHeader, CrystalGradientText } from '@artasce/crystal-ui';
<CrystalSectionHeader
eyebrow="Case Studies"
heading={<>Proven <CrystalGradientText>Results</CrystalGradientText></>}
description="Real work for Fortune 500 companies and growing startups."
/>CrystalSectionHeader Props
| Token | Variable | Value |
|---|---|---|
eyebrow | string | (required) |
heading | ReactNode | (required) |
description | ReactNode | — |
headingLevel | 'h1' | 'h2' | 'h3' | 'h2' |
align | 'left' | 'center' | 'left' |
Values update live with theme changes. Click any row to copy the CSS variable.
CrystalSteppedList
A numbered process list with accent-colored step numbers.
Open in Storybook→import { CrystalSteppedList } from '@artasce/crystal-ui';
<CrystalSteppedList
items={[
{ title: 'Discovery Call', description: "We'll discuss your challenges and goals" },
{ title: 'Technical Assessment', description: 'Right approach for your needs' },
{ title: 'Proposal', description: 'Clear scope, timeline, and investment' },
]}
/>CrystalSteppedList Props
| Token | Variable | Value |
|---|---|---|
items | { title: string; description?: string }[] | (required) |
startAt | number | 1 |
accentColor | 'primary' | 'secondary' | 'secondary' |
Values update live with theme changes. Click any row to copy the CSS variable.
CrystalServiceAccordion
An interactive accordion for listing services, built on shadcn/ui Accordion primitives.
Open in Storybook→import { CrystalServiceAccordion } from '@artasce/crystal-ui';
<CrystalServiceAccordion
items={[
{ icon: <Gem />, title: 'AI Solutions', summary: 'Custom AI agents and LLM integration', detail: <p>Full details...</p> },
{ icon: <Cloud />, title: 'Cloud Architecture', summary: 'Multi-cloud infrastructure' },
{ icon: <Zap />, title: 'Digital Transformation', summary: 'Enterprise automation' },
]}
/>CrystalServiceAccordion Props
| Token | Variable | Value |
|---|---|---|
items | CrystalServiceAccordionItem[] | (required) |
type | 'single' | 'multiple' | 'single' |
Values update live with theme changes. Click any row to copy the CSS variable.
CrystalFullscreenSlider
Open in Storybook→A Swiper.js-based fullscreen slider supporting fade, slide, and carousel effects with video (self-hosted, YouTube, Vimeo), parallax, and configurable navigation.
import { CrystalFullscreenSlider } from '@artasce/crystal-ui';
<CrystalFullscreenSlider
slides={[
{ id: '1', type: 'image', src: '/hero.jpg', headline: 'Welcome', subtitle: 'Crystal Design System' },
{ id: '2', type: 'video', src: '/demo.mp4', headline: 'In Action' },
]}
effect="fade"
autoplay
/>Key CrystalFullscreenSlider Props
| Token | Variable | Value |
|---|---|---|
slides | SlideData[] | (required) |
effect | 'slide' | 'fade' | 'carousel' | 'slide' |
direction | 'horizontal' | 'vertical' | 'horizontal' |
showArrows | boolean | true |
showProgress | boolean | true |
autoplay | boolean | false |
autoplayDelay | number | 5000 |
enableParallax | boolean | true |
loop | boolean | true |
respectReducedMotion | boolean | true |
Values update live with theme changes. Click any row to copy the CSS variable.