Mockups

Twig: mockups/content.twig

                <div class="page">
  {% include '@mixtape/global/src/global-header.twig' %}
  <div class="page__middle">
    {% embed '@mixtape/layout/src/section.twig' with { modifier_class: 'section--divider' } %}
      {% block content %}
        {% include '@mixtape/navigation/src/navigation-breadcrumb.twig' with { modifier_class: '' } %}
      {% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with {
      layout_class: 'section--xl'
    } %}
      {% block content %}
        {% embed "@mixtape/page/src/page-title.twig" with { modifier_class: 'text--center' } %}
          {% block return %}{% endblock %}
          {% block title %}
            <h1 class="text--headline">Something a little different.</h1>
          {% endblock %}
          {% block subtitle %}{% endblock %}
        {% endembed %}
      {% endblock %}
      {% block background %}{% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with {
      modifier_class: 'section--narrow',
      layout_class: 'section--bottom-xl rich-text vertical-flow'
    } %}
      {% block content %}
        {% include '@mixtape/base/src/typography.twig' %}
        {% include '@mixtape/base/src/table-responsive.twig' %}
      {% endblock %}
    {% endembed %}
  </div>
  {% include '@mixtape/global/src/global-footer.twig' %}
</div>

Twig: mockups/form.twig

                <div class="page">
  {% include '@mixtape/global/src/global-header.twig' %}
  <div class="page__middle">
    {% embed '@mixtape/layout/src/section.twig' with { modifier_class: 'section--divider' } %}
      {% block content %}
        {% include '@mixtape/navigation/src/navigation-breadcrumb.twig' with { modifier_class: '' } %}
      {% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with {
      layout_class: 'section--xl'
    } %}
      {% block content %}
        {% embed "@mixtape/page/src/page-title.twig" with { modifier_class: 'text--center' } %}
          {% block return %}{% endblock %}
          {% block title %}
            <h1 class="text--headline">Feeling chatty?</h1>
          {% endblock %}
          {% block subtitle %}{% endblock %}
        {% endembed %}
      {% endblock %}
      {% block background %}{% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with {
      modifier_class: 'section--narrow',
      layout_class: 'section--bottom-xl rich-text vertical-flow'
    } %}
      {% block content %}
        <h2>Send us a message</h2>
        {% include '@mixtape/form/src/form-example.twig' %}
      {% endblock %}
    {% endembed %}
  </div>
  {% include '@mixtape/global/src/global-footer.twig' %}
</div>

Twig: mockups/home.twig

                <div class="page">
  {% include '@mixtape/global/src/global-header.twig' %}
  <div class="page__middle">
    {% embed '@mixtape/layout/src/section.twig' with {
      layout_class: 'grid section--xl',
      modifier_class: 'section--dark'
    } %}
      {% block content %}
        {% embed "@mixtape/page/src/page-title.twig" with { modifier_class: 'grid--6-col page__title--hero' } %}
          {% block return %}{% endblock %}
          {% block title %}
            <h1 class="text--headline">Always put your best foot forward.</h1>
          {% endblock %}
          {% block subtitle %}
            <p class="text--xl">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p>
            <a href="#cta" class="button button--large button--primary">Call to action</a>
          {% endblock %}
        {% endembed %}
      {% endblock %}
      {% block background %}
        <figure class="section__background">
          <img src="https://placeimg.com/1000/800/arch" alt="">
        </figure>
      {% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with { layout_class: 'section--xl' } %}
      {% block content %}
        {% include '@mixtape/content-card/src/content-card.twig' with {
          modifier_class: 'content-card--landscape content-card--right',
          content_card_title: 'Key feature or Section Name',
          content_card_content: 'A short description to help explain enough about the subject matter to encourage visitors to learn more.'
        } %}
      {% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with { layout_class: 'section--xl' } %}
      {% block content %}
        {% include '@mixtape/content-card/src/content-card.twig' with {
          modifier_class: 'content-card--landscape',
          content_card_title: 'Key feature or Section Name',
          content_card_content: 'A short description to help explain enough about the subject matter to encourage visitors to learn more.'
        } %}
      {% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with { layout_class: 'grid section--xl' } %}
      {% block content %}
        {% include '@mixtape/content-card/src/content-card.twig' with {
          modifier_class: 'grid__col grid--4-col',
          content_card_title: 'Key feature or Section Name',
          content_card_content: 'A short description to help explain enough about the subject matter to encourage visitors to learn more.'
        } %}
        {% include '@mixtape/content-card/src/content-card.twig' with {
          modifier_class: 'grid__col grid--4-col',
          content_card_title: 'Key feature or Section Name',
          content_card_content: 'A short description to help explain enough about the subject matter to encourage visitors to learn more.'
        } %}
        {% include '@mixtape/content-card/src/content-card.twig' with {
          modifier_class: 'grid__col grid--4-col',
          content_card_title: 'Key feature or Section Name',
          content_card_content: 'A short description to help explain enough about the subject matter to encourage visitors to learn more.'
        } %}
      {% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with { layout_class: 'section--l' } %}
      {% block content %}
        <p class="text--section-headline">Related Feature or Section Name</p>
        <h2 id="cta">An engaging headline to encourage action</h2>
      {% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with { layout_class: 'grid section--xl' } %}
      {% block content %}
        {% embed '@mixtape/content-card/src/content-card.twig' with { modifier_class: 'grid__col grid--6-col' } %}
          {% block content %}
            <h3>Key feature or Section Name</h3>
            <p>A short description to help explain enough about the subject matter to encourage visitors to learn more.</p>
            {% include '@mixtape/link-list/src/link-list.twig' with { modifier_class: 'link-list--divided' } %}
          {% endblock %}
        {% endembed %}
        {% embed '@mixtape/content-card/src/content-card.twig' with { modifier_class: 'grid__col grid--6-col' } %}
          {% block content %}
            <h3>{{ content_card_title | default('Key feature or Section Name')}}</h3>
            <p>{{ content_card_content | default('A short description to help explain enough about the subject matter to encourage visitors to learn more.')}}</p>
            {% include '@mixtape/link-list/src/link-list.twig' with { modifier_class: 'link-list--divided' } %}
          {% endblock %}
        {% endembed %}
      {% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with { layout_class: 'section--xl', modifier_class: 'background--grey-05 '} %}
      {% block content %}
        {% embed '@mixtape/cta/src/cta.twig' with { modifier_class: 'cta--narrow' } %}
          {% block content %}
            <h2>Are you ready to get started?</h2>
          {% endblock %}
          {% block actions %}
            <div class="cta__actions">
              <a href="#" class="button button--large button--primary">Start the process</a>
            </div>
          {% endblock %}
        {% endembed %}
      {% endblock %}
    {% endembed %}
  </div>
  {% include '@mixtape/global/src/global-footer.twig' %}
</div>

Twig: mockups/index.twig

                <div class="page">
  {% include '@mixtape/global/src/global-header.twig' %}
  <div class="page__middle">
    {% embed '@mixtape/layout/src/section.twig' with { modifier_class: 'section--divider' } %}
      {% block content %}
        {% include '@mixtape/navigation/src/navigation-breadcrumb.twig' with { modifier_class: '' } %}
      {% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with {
      layout_class: 'grid section--xl'
    } %}
      {% block content %}
        {% embed "@mixtape/page/src/page-title.twig" with { modifier_class: 'grid--6-col' } %}
          {% block return %}{% endblock %}
          {% block title %}
            <h1 class="text--headline">Always put your best foot forward.</h1>
          {% endblock %}
          {% block subtitle %}
            <p class="text--xl">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p>
          {% endblock %}
        {% endembed %}
      {% endblock %}
      {% block background %}{% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with { layout_class: 'section--xl' } %}
      {% block content %}
        <div class="tiles grid tiles--small">
          {% include "@mixtape/tiles/src/tile.twig" with { modifier_class : "grid--3-col", title: 'Page Name' } %}
          {% include "@mixtape/tiles/src/tile.twig" with { modifier_class : "grid--3-col", title: 'Frequently Asked Questions' } %}
          {% include "@mixtape/tiles/src/tile.twig" with { modifier_class : "grid--3-col", title: 'History' } %}
          {% include "@mixtape/tiles/src/tile.twig" with { modifier_class : "grid--3-col", title: 'General Information' } %}
          {% include "@mixtape/tiles/src/tile.twig" with { modifier_class : "grid--3-col", title: 'Page Name' } %}
          {% include "@mixtape/tiles/src/tile.twig" with { modifier_class : "grid--3-col", title: 'Page Name' } %}
          {% include "@mixtape/tiles/src/tile.twig" with { modifier_class : "grid--3-col", title: 'Page Name' } %}
          {% include "@mixtape/tiles/src/tile.twig" with { modifier_class : "grid--3-col", title: 'Page Name' } %}
        </div>
      {% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with { layout_class: 'section--xl' } %}
      {% block content %}
        {% include '@mixtape/cta/src/cta.twig' with { modifier_class: 'cta--narrow' } %}
      {% endblock %}
    {% endembed %}
  </div>
  {% include '@mixtape/global/src/global-footer.twig' %}
</div>

Twig: mockups/sidebar.twig

                <div class="page">
  {% include '@mixtape/global/src/global-header.twig' %}
  <div class="page__middle">
    {% embed '@mixtape/layout/src/section.twig' with { modifier_class: 'section--divider' } %}
      {% block content %}
        {% include '@mixtape/navigation/src/navigation-breadcrumb.twig' with { modifier_class: '' } %}
      {% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with {
      layout_class: 'section--xl'
    } %}
      {% block content %}
        {% include "@mixtape/page/src/page-title.twig" %}
      {% endblock %}
      {% block background %}{% endblock %}
    {% endembed %}
    {% embed '@mixtape/layout/src/section.twig' with {
      layout_class: 'section--bottom-xl'
    } %}
    {% block content %}
      {% embed '@mixtape/page/src/page-sidebar.twig' with {
        content_class: 'rich-text vertical-flow'
      }%}
        {% block content %}
          {% include '@mixtape/base/src/typography.twig' %}
        {% endblock %}
        {% block sidebar %}
          <h2 class="text--embellished-headline">In this section</h2>
          {% include '@mixtape/navigation/src/navigation-ordered.twig' %}
        {% endblock %}
      {% endembed %}
    {% endblock %}
    {% endembed %}
  </div>
  {% include '@mixtape/global/src/global-footer.twig' %}
</div>