There are no notes for this item.

<section class='c-banner t-theme--education'>

    <span class='c-icon t-theme--education c-icon--icon-leaf-education-svg'>
        <?xml version="1.0" encoding="utf-8"?>
        <!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
        <svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" xml:space="preserve">
            <g id="Education_1_">
                <g>
                    <g>
                        <path fill="#53AEDE" d="M98.1,2.8c-47.7,10-85.3,47.6-95.3,95.3C-14,178.8,47.2,250,125,250h125V125C250,47.2,178.8-14,98.1,2.8z
				" />
                    </g>
                </g>
                <g id="Artwork_2_2_">
                    <g>

                        <image width="625" height="440" xlink:href="data:image/png;base64,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" transform="matrix(0.24 0 0 0.24 53.5177 79.922)">
                        </image>
                    </g>
                </g>
            </g>
        </svg>

    </span>

    <header class='c-section-header t-theme--education'>

        <p class='c-section-header__supra'><span>Section name</span></p>

        <h1 class='c-heading t-theme--education'>

            Hello, John!

        </h1>

    </header>

    <div class='c-lead t-theme--education'>
        <p>The first paragraph has to briefly describe, in 2 sentences or less, which benefits the current section is.</p>
    </div>

</section>

<div class='c-callouts t-theme--education c-callouts__callouts t-background--accent container-fluid'>
    <ul class='c-callouts__items row'>

        <li class='c-callouts__items__item col'>
            <section class='c-callout c-callouts__callout'>

                <span class='c-icon c-icon--x-large c-callout__icon c-icon--noun_Communication_1435998-svg'>
                    <svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px">
                        <title>Artboard 4</title>
                        <path d="M48.68,51.39a4.8,4.8,0,0,0-2.14-4,6.94,6.94,0,0,1,4.09-12.69,7.07,7.07,0,0,1,6.73,7A6.93,6.93,0,0,1,54.3,47.4a4.79,4.79,0,0,0,2.64,8.78,6.89,6.89,0,0,1,6.88,6.88V64a2.5,2.5,0,0,0,5,0v-.92A11.9,11.9,0,0,0,57.58,51.2a11.94,11.94,0,1,0-14.34,0A11.9,11.9,0,0,0,32,63.06v4a2.5,2.5,0,0,0,5,0v-4a6.89,6.89,0,0,1,6.88-6.88A4.8,4.8,0,0,0,48.68,51.39Z"></path>
                        <path d="M93.35,54.46c.15-1.46.25-2.91.25-4.33a43.4,43.4,0,0,0-5.19-20.54,9.47,9.47,0,0,0-12-14.06A43.52,43.52,0,0,0,51.67,6.72,9.48,9.48,0,0,0,33.44,10,43.73,43.73,0,0,0,14,26.06a10.67,10.67,0,0,0-7,19.81c-.14,1.43-.24,2.86-.24,4.26a43.4,43.4,0,0,0,5.13,20.44A9.47,9.47,0,0,0,23.78,84.65,43.51,43.51,0,0,0,48.7,93.55a9.47,9.47,0,0,0,18.1-3.28A43.72,43.72,0,0,0,86.36,74.14a10.67,10.67,0,0,0,7-19.68Zm-12.55-35a4.49,4.49,0,1,1-4.49,4.49A4.49,4.49,0,0,1,80.8,19.45ZM42.91,5.85a4.49,4.49,0,1,1-4.49,4.49A4.49,4.49,0,0,1,42.91,5.85ZM6.53,36.59a5.68,5.68,0,1,1,5.68,5.69A5.69,5.69,0,0,1,6.53,36.59Zm12.9,44.13a4.49,4.49,0,1,1,4.49-4.49A4.49,4.49,0,0,1,19.43,80.72ZM57.35,94.15a4.49,4.49,0,1,1,4.49-4.49A4.49,4.49,0,0,1,57.35,94.15Zm8.4-8.88a9.48,9.48,0,0,0-17.81,3.24A38.5,38.5,0,0,1,27.5,81.19,9.47,9.47,0,0,0,15.83,67.46,38.42,38.42,0,0,1,11.7,50.13c0-.05,0-.11,0-.16A44.57,44.57,0,0,0,24,62.39a2.5,2.5,0,0,0,2.89-4.08c-5.15-3.65-9.06-7.68-11.29-11.59a10.66,10.66,0,0,0,5.58-15.95c4.63-1.8,11-2.4,18.08-1.64a2.5,2.5,0,0,0,.53-5c-7.4-.79-14.05-.24-19.3,1.54A38.7,38.7,0,0,1,34.63,15a9.47,9.47,0,0,0,17.65-3.21A38.52,38.52,0,0,1,72.71,19a9.48,9.48,0,0,0,11.71,13.7A38.42,38.42,0,0,1,88.6,50.13c0,.25,0,.51,0,.76-3.71-6.51-11-12.91-20.5-17.95a2.5,2.5,0,0,0-2.33,4.42C74.4,41.94,81.11,47.81,84.3,53.48a10.65,10.65,0,0,0-5.52,15.8c-7.88,3.15-20.42,2.6-33.11-1.63a2.5,2.5,0,0,0-1.58,4.74A72.11,72.11,0,0,0,66.5,76.3,39.1,39.1,0,0,0,80.21,74.1,38.72,38.72,0,0,1,65.75,85.27Zm22-16a5.68,5.68,0,1,1,5.68-5.69A5.69,5.69,0,0,1,87.79,69.25Z"></path>
                    </svg>
                </span>

                <h1 class='c-heading c-callouts__heading'>

                    Benefit

                </h1>

                <div class='c-lead c-callouts__lead'>
                    <p>A callout highlights a small section of a page. The text should provide an information scent for the link's target.</p>
                </div>

            </section>
        </li>

        <li class='c-callouts__items__item col'>
            <section class='c-callout c-callouts__callout'>

                <span class='c-icon c-icon--x-large c-callout__icon c-icon--noun_agreement_1183842-svg'>
                    <svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px">
                        <title>Artboard 18</title>
                        <path d="M87.92,31.35H87.6A10.9,10.9,0,0,0,77,42.19V56.28H67.52A7.53,7.53,0,0,0,60,63.8v27a2.5,2.5,0,0,0,2.5,2.5h10a2.5,2.5,0,0,0,2.5-2.5V71.28H88.47A10.54,10.54,0,0,0,99,60.75V42.19A10.84,10.84,0,0,0,87.92,31.35ZM94,60.75a5.54,5.54,0,0,1-5.53,5.53h-16a2.5,2.5,0,0,0-2.5,2.5v19.5H65V63.8a2.52,2.52,0,0,1,2.52-2.52h12a2.5,2.5,0,0,0,2.5-2.5V42.19a5.87,5.87,0,0,1,5.71-5.84H88A5.89,5.89,0,0,1,92.24,38,5.8,5.8,0,0,1,94,42.19Z"></path>
                        <path d="M88.15,6.72A10.85,10.85,0,1,0,99,17.57,10.86,10.86,0,0,0,88.15,6.72Zm0,16.69A5.85,5.85,0,1,1,94,17.57,5.85,5.85,0,0,1,88.15,23.41Z"></path>
                        <path d="M11.53,71.28H25v19.5a2.5,2.5,0,0,0,2.5,2.5h10a2.5,2.5,0,0,0,2.5-2.5v-27a7.53,7.53,0,0,0-7.52-7.52H23V42.19A10.9,10.9,0,0,0,12.4,31.36h-.32A10.84,10.84,0,0,0,1,42.19V60.75A10.54,10.54,0,0,0,11.53,71.28ZM6,42.19a5.84,5.84,0,0,1,6-5.84h.32A5.87,5.87,0,0,1,18,42.19V58.78a2.5,2.5,0,0,0,2.5,2.5h12A2.52,2.52,0,0,1,35,63.8V88.28H30V68.78a2.5,2.5,0,0,0-2.5-2.5h-16A5.54,5.54,0,0,1,6,60.75Z"></path>
                        <path d="M22.69,17.57A10.85,10.85,0,1,0,11.85,28.41,10.86,10.86,0,0,0,22.69,17.57ZM6,17.57a5.85,5.85,0,1,1,5.85,5.85A5.85,5.85,0,0,1,6,17.57Z"></path>
                        <path d="M28.5,47.78a2.5,2.5,0,0,0,2.5,2.5H47.5v40.5a2.5,2.5,0,0,0,5,0V50.28H69a2.5,2.5,0,0,0,0-5H31A2.5,2.5,0,0,0,28.5,47.78Z"></path>
                        <path d="M44.16,38.17a4.63,4.63,0,0,0,3.06,1.15h.33a4.64,4.64,0,0,0,3.2-1.59L68,18a4.67,4.67,0,0,0-.45-6.58l-4-3.51a4.67,4.67,0,0,0-6.58.45h0L46.26,20.52l-4.11-3.59a4.67,4.67,0,0,0-6.58.45l-3.51,4A4.67,4.67,0,0,0,32.5,28Zm-5-17.24,5.75,5a2.5,2.5,0,0,0,3.53-.24L60.45,11.86,64,14.93,47.2,34.18,36,24.45Z"></path>
                    </svg>
                </span>

                <h1 class='c-heading c-callouts__heading'>

                    Benefit no. 2

                </h1>

                <div class='c-lead c-callouts__lead'>
                    <p>The order of the benefits is irrelevant, but titles need to be focused and short. When in doubt, alphabetize.</p>
                </div>

            </section>
        </li>

        <li class='c-callouts__items__item col'>
            <section class='c-callout c-callouts__callout'>

                <span class='c-icon c-icon--x-large c-callout__icon c-icon--noun_Favorite_1428995-svg'>
                    <svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px">
                        <title>Artboard 1</title>
                        <path d="M35.6,48.5V47.12A5.09,5.09,0,0,0,30.51,42h-13a5.09,5.09,0,0,0-5.09,5.09V92.41A5.09,5.09,0,0,0,17.5,97.5h13a5.08,5.08,0,0,0,5.06-4.87l3.32,2A19.54,19.54,0,0,0,49,97.42H70.88a19,19,0,0,0,7.67-1.52c7-3,8-8.54,7.5-12.14a11.35,11.35,0,0,0,3.33-12.64A11.24,11.24,0,0,0,92,63.68a10.78,10.78,0,0,0-2.13-5.88A9.41,9.41,0,0,0,87.49,47q-.32-.29-.66-.56a9.77,9.77,0,0,0-3.95-1.75l-.1,0c-6.88-1.46-11.52-1.55-18.32-1.55-.27-1.54-.29-4.85,1.79-11.14,1.89-5.7,1.73-10.4-.49-14a11.6,11.6,0,0,0-8.29-5.28l-.31,0a5.37,5.37,0,0,0-5.24,3.81,2.48,2.48,0,0,0-.08.36l-.78,5.59a16.75,16.75,0,0,1-1.45,4.87L42.1,43.21A9,9,0,0,1,35.6,48.5Zm-5,43.91a.09.09,0,0,1-.09.09h-13a.09.09,0,0,1-.09-.09V47.12A.09.09,0,0,1,17.5,47h13a.09.09,0,0,1,.09.09ZM46.66,45.27l7.48-15.8A21.74,21.74,0,0,0,56,23.14l.74-5.31A.36.36,0,0,1,57,17.7a6.66,6.66,0,0,1,4.54,2.93c1.38,2.24,1.38,5.62,0,9.79-2,6-2.63,10.79-1.86,14.14a4.6,4.6,0,0,0,4.51,3.57h0c6.88,0,11.07.06,17.58,1.45l.1,0a4.84,4.84,0,0,1,1.95.82l.33.28c2.76,2.5.85,5.79.63,6.14A2.53,2.53,0,0,0,85.18,60,6.23,6.23,0,0,1,87,63.94,7.23,7.23,0,0,1,84.62,69a2.53,2.53,0,0,0-.34,3c.47.82,2.55,5.12-2.5,8.83a2.54,2.54,0,0,0-.88,2.84c.28.84,1.41,5.15-4.35,7.67a14.06,14.06,0,0,1-5.67,1.1H49a14.54,14.54,0,0,1-7.49-2.08L35.6,86.81V53.59l.67-.12A13.93,13.93,0,0,0,46.66,45.27Z"></path>
                        <path d="M25.36,35.9a2.5,2.5,0,0,0,2.39,0C45.05,26.47,45.54,16.42,45,12.54A11.66,11.66,0,0,0,36,2.7a10.24,10.24,0,0,0-9.39,3,10.24,10.24,0,0,0-9.39-3,11.66,11.66,0,0,0-9,9.84C7.58,16.42,8.07,26.47,25.36,35.9ZM13.11,13.29a6.65,6.65,0,0,1,5-5.69,5.09,5.09,0,0,1,1-.1c2,0,3.9,1.24,5.27,3.5a2.5,2.5,0,0,0,4.28,0C30.3,8.36,32.58,7.12,35,7.6a6.65,6.65,0,0,1,5,5.69c.87,5.68-4.14,12.18-13.45,17.56C17.25,25.47,12.25,19,13.11,13.29Z"></path>
                    </svg>
                </span>

                <h1 class='c-heading c-callouts__heading'>

                    Last not least

                </h1>

                <div class='c-lead c-callouts__lead'>
                    <p>The text should be edited in order to have the columns have comparable heights on most screens.</p>
                </div>

            </section>
        </li>

    </ul>
</div>

<section class='container-fluid padding--vertical--large'>
    <div class='row'>
        <div class='col-6 offset-3 u-text--center'>
            <h1 class='c-heading'>

                Getting started

            </h1>

            <div class='c-lead'>
                <p>End with a short description of what will happen after the next button-looking link is clicked.</p>
            </div>
            <div class='c-task-list'>

                <ol class='c-task-list__items'>

                    <li class='c-task-list__items__item c-task-list__items__item--done'>
                        <span class='u-h4'>Access your account</span>
                        Create your password and review personal details.

                    </li>

                    <li class='c-task-list__items__item c-task-list__items__item--current'>
                        <span class='u-h4'>Check the first 2 items off</span>
                        Finish the setup of your phase.

                    </li>

                </ol>
            </div>
            <p><a class='c-button' href="#">Take the next step</a></p>
        </div>
    </div>
</section>
{% include '@unit/banner/banner.twig' with banner %}

{% include '@group/collection/collection.twig' with callouts %}

<section class='container-fluid padding--vertical--large'>
    <div class='row'>
        <div class='col-6 offset-3 u-text--center'>
            {% include '@unit/heading/heading.twig' with nextSteps.heading %}
            {% include '@unit/lead/lead.twig' with nextSteps.lead %}
            {% include '@unit/task-list/task-list.twig' with { items: nextSteps.taskList } %}
            <p>{% include '@base/button/button.twig' with nextSteps.button %}</p>
        </div>
    </div>
</section>
{
  "banner": {
    "display": {
      "theme": "education"
    },
    "leaf": "education",
    "header": {
      "supraheading": "Section name",
      "heading": {
        "text": "Hello, John!"
      }
    },
    "lead": {
      "content": "<p>The first paragraph has to briefly describe, in 2 sentences or less, which benefits the current section is.</p>"
    }
  },
  "callouts": {
    "display": {
      "component": "callouts",
      "theme": "education",
      "backgroundType": "accent",
      "class": [
        "container-fluid"
      ]
    },
    "collection": {
      "display": {
        "itemTemplate": "unit/callout/callout",
        "listClass": [
          "row"
        ],
        "itemClass": [
          "col"
        ]
      },
      "items": [
        {
          "icon": {
            "basename": "noun_Communication_1435998.svg"
          },
          "heading": {
            "text": "Benefit"
          },
          "lead": {
            "content": "<p>A callout highlights a small section of a page. The text should provide an information scent for the link's target.</p>"
          },
          "link": null
        },
        {
          "icon": {
            "basename": "noun_agreement_1183842.svg"
          },
          "heading": {
            "text": "Benefit no. 2"
          },
          "lead": {
            "content": "<p>The order of the benefits is irrelevant, but titles need to be focused and short. When in doubt, alphabetize.</p>"
          },
          "link": null
        },
        {
          "icon": {
            "basename": "noun_Favorite_1428995.svg"
          },
          "heading": {
            "text": "Last not least"
          },
          "lead": {
            "content": "<p>The text should be edited in order to have the columns have comparable heights on most screens.</p>"
          },
          "link": null
        }
      ]
    }
  },
  "nextSteps": {
    "heading": {
      "text": "Getting started"
    },
    "lead": {
      "content": "<p>End with a short description of what will happen after the next button-looking link is clicked.</p>"
    },
    "taskList": [
      {
        "title": "Access your account",
        "description": "Create your password and review personal details.",
        "status": "done"
      },
      {
        "title": "Check the first 2 items off",
        "description": "Finish the setup of your phase.",
        "status": "current"
      }
    ],
    "button": {
      "text": "Take the next step",
      "url": "#"
    }
  }
}
  • Handle: @onboarding-screen
  • Preview:
  • Filesystem Path: components\06-template\onboarding-screen\onboarding-screen.twig