Storybook
/
Layout
Badge
  1. Recently opened
  2. Back to componentsESC
  3. Clear history
NameControl
page
page : {
  • title : "Example Page"
  • layout : "AdvancedLayout"
  • sections : [...] 5 items
}
site
site : {
  • backgroundColor : "bg-primary"
  • navBar : {...} 11 keys
    footer : {...} 12 keys
}
title: "Example Page"
layout: "AdvancedLayout"
sections:
  - type: "HeroSection"
    variant: "variant-a"
    colors: "colors-d"
    width: "wide"
    height: "auto"
    alignHoriz: "left"
    badge: "New Collaboration"
    title: "The quick, brown fox jumps over **a lazy dog**"
    text: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae. explicabo."
    actions:
      - type: "Button"
        url: "#"
        label: "Apply Now"
        style: "primary"
      - type: "Button"
        url: "#"
        label: "Learn more"
        style: "secondary"
    feature:
      type: "ImageBlock"
      imageUrl: "/images/hero.png"
      imageAltText: "Image alt text"
      imageCaption: "Image caption"
  - type: "TestimonialsSection"
    variant: "variant-a"
    colors: "colors-e"
    width: "wide"
    height: "auto"
    testimonials:
      - quote: "“It’s great to see someone taking action while still maintaining a sustainable fish supply to home cooks.”"
        name: "Isabelle Parks"
        title: "Head chef at The Cook"
        imageUrl: "/images/isabelle-parks.jpg"
        imageAltText: "Photo of Isabelle Parks"
        logoUrl: "/images/the-cook-logo.svg"
        logoAltText: "The Cook logo"
  - type: "FeaturedPostsSection"
    variant: "variant-a"
    colors: "colors-d"
    width: "wide"
    height: "auto"
    posts:
      - title: "Sustainability at it’s purest"
        date: "2021-07-03"
        excerpt: "We’re local, seasonal fisherman, supporting fishing restrictions. We fish what the sea has to offer, nothing more, and no cheating."
        thumbImageUrl: "/images/fisherman.jpg"
        thumbImageAltText: "Fisherman"
        markdown_content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ea mala virtuti magnitudine obruebantur. Duo Reges: constructio interrete. An hoc usque quaque, aliter in vita? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Quo plebiscito decreta a senatu est consuli quaestio Cn. Illud non continuo, ut aeque incontentae. Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Itaque hoc frequenter dici solet a vobis, non intellegere nos, quam dicat Epicurus voluptatem. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.\n\n## Sed Ille, UT Dixi, Vitiose\n\nUtrum igitur tibi litteram videor an totas paginas commovere? Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Ne in odium veniam, si amicum destitero tueri. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Quis istud, quaeso, nesciebat? Primum divisit ineleganter; Hoc unum Aristo tenuit: praeter vitia atque virtutes negavit rem esse ullam aut fugiendam aut expetendam. Et ille ridens: Video, inquit, quid agas; In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret.\n\n"
      - title: "As fresh as it gets"
        date: "2021-07-01"
        excerpt: "Same day delivery, cleaned, on ice, ready to be eaten."
        thumbImageUrl: "/images/mackerels.jpg"
        thumbImageAltText: "Mackerels"
        markdown_content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ea mala virtuti magnitudine obruebantur. Duo Reges: constructio interrete. An hoc usque quaque, aliter in vita? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Quo plebiscito decreta a senatu est consuli quaestio Cn. Illud non continuo, ut aeque incontentae. Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Itaque hoc frequenter dici solet a vobis, non intellegere nos, quam dicat Epicurus voluptatem. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.\n\n## Sed Ille, UT Dixi, Vitiose\n\nUtrum igitur tibi litteram videor an totas paginas commovere? Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Ne in odium veniam, si amicum destitero tueri. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Quis istud, quaeso, nesciebat? Primum divisit ineleganter; Hoc unum Aristo tenuit: praeter vitia atque virtutes negavit rem esse ullam aut fugiendam aut expetendam. Et ille ridens: Video, inquit, quid agas; In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret.\n\n"
      - title: "Bi-weekly subscription"
        date: "2021-06-28"
        excerpt: "This feature is the thing you were missing in your workflow, thank god we have it for you to use."
        thumbImageUrl: "/images/fish-lemon.jpg"
        thumbImageAltText: "Raw fish, spices, lemon"
        markdown_content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ea mala virtuti magnitudine obruebantur. Duo Reges: constructio interrete. An hoc usque quaque, aliter in vita? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Quo plebiscito decreta a senatu est consuli quaestio Cn. Illud non continuo, ut aeque incontentae. Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Itaque hoc frequenter dici solet a vobis, non intellegere nos, quam dicat Epicurus voluptatem. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.\n\n## Sed Ille, UT Dixi, Vitiose\n\nUtrum igitur tibi litteram videor an totas paginas commovere? Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Ne in odium veniam, si amicum destitero tueri. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Quis istud, quaeso, nesciebat? Primum divisit ineleganter; Hoc unum Aristo tenuit: praeter vitia atque virtutes negavit rem esse ullam aut fugiendam aut expetendam. Et ille ridens: Video, inquit, quid agas; In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret.\n\n"
  - type: "CtaSection"
    variant: "variant-a"
    colors: "colors-b"
    width: "wide"
    height: "auto"
    alignHoriz: "center"
    title: "Let's do this"
    text: "The Stackbit theme is flexible and scalable to every need. It can manage any layout and any screen."
    actions:
      - type: "Button"
        url: "#"
        label: "Get Started"
        style: "primary"
  - type: "ContactSection"
    variant: "variant-b"
    colors: "colors-e"
    width: "wide"
    height: "auto"
    alignHoriz: "left"
    title: "Join our club"
    text: "We will notify you every time a shipment is heading to your neighborhood, and you could immediatly let us know if you want in or not."
    image:
      type: "ImageBlock"
      imageUrl: "/images/lobster.jpg"
      imageAltText: "Fisherman holding lobster"
    form:
      type: "FormBlock"
      idAttr: "contact-form"
      fields:
        - type: "TextFormControl"
          name: "name"
          label: "Name"
          placeholder: "Your name"
          isRequired: true
          width: "1/2"
        - type: "EmailFormControl"
          name: "email"
          label: "Email"
          placeholder: "Your email"
          isRequired: true
          width: "1/2"
        - type: "TextFormControl"
          name: "home-address"
          label: "Home address"
          placeholder: "Your home address"
          isRequired: true
          width: "full"
        - type: "CheckboxFormControl"
          name: "updates"
          label: "Sign me up to receive updates"
          width: "full"
      submitLabel: "Send Message"