# ScrollyStep

> One block of the narrative.

Source: https://ui.jcsoftdev.com/docs/components/scrolly-step

One block of the narrative. Marked `aria-current="step"` and `data-active` while it is the active one.

## Import

```ts
import { ScrollyStep } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/scrolly`.

## Usage

```tsx
export const Default: Story = {
  render: (args) => (
    <div style={{ padding: 16 }}>
      <Narrative side={args.graphicSide} />
    </div>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` * | `ReactNode` |  |  |
| `minHeight` | `string` | `"70svh"` | Minimum height of the step, any CSS length; a tall step gives the reader time with the graphic. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/containers-scrolly--default)
- [Narrow](/storybook/?path=/story/containers-scrolly--narrow)
- [With Step Indicator](/storybook/?path=/story/containers-scrolly--with-step-indicator)
- [Brutal Preset](/storybook/?path=/story/containers-scrolly--brutal-preset)

## Source

`packages/ui/src/containers/scrolly/scrolly.tsx`