Skip to main content

Intro

Stories are a way, together with the Page embed, to re-use content across pages.

While embedding a page inside another page lets you have a "single source of truth" (changing an embedded page would change the content of all the pages which embed it), a "story" is like a cookie cutter for bricks. A story is a set of props for a brick: when you apply a story to a brick, you apply the saved props to it. From that point, the brick can be changed in any way and it has no connection with the story it inherited the props from.

How to create a story

Stories can be created in two ways:

  • In code, by the developer, using the stories array in the brick's schema. In this case the stories live in your design system's code. It is also possible to specify that a story is shown as a normal brick in the "Add new brick" menu, by setting the showAsBrick flag of the story to true.

  • By the editor, using the "Stories" tab in the editor. In this case the stories are saved to the React Bricks service database and retrieved from the React Bricks APIs.

Example usage​

HeroUnit.schema = {
  ...
  stories: [
    {
      id: 'with-blue-background',
      name: 'With blue background',
      props: {
        title: 'This is a hero with a gradient',
        background: { color: '#172554' }
      },
      showAsBrick: true
    },
  ],
}

See also the BrickStory type.