Mockups

                {% include '@mixtape/global/src/global-header.twig' with { link: '/item-mockups-home.html' } %}
{% 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 {
  modifier_class: 'section--xl'
} %}
  {% block content %}
    {% embed "@mixtape/page/src/page-title.twig" with { modifier_class: 'text--center' } %}
      {% block return %}{% endblock %}
      {% block title %}
        <h1 class="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 section--bottom-xl',
  layout_class: 'rich-text vertical-flow'
} %}
  {% block content %}
    {% include '@mixtape/base/src/typography.twig' %}
    {% include '@mixtape/base/src/table-responsive.twig' %}
  {% endblock %}
{% endembed %}
{% include '@mixtape/global/src/global-footer.twig' %}


              

                {% include '@mixtape/global/src/global-header.twig' with { link: '/item-mockups-home.html' } %}
{% 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 {
  modifier_class: 'section--xl'
} %}
  {% block content %}
    {% embed "@mixtape/page/src/page-title.twig" with { modifier_class: 'text--center' } %}
      {% block return %}{% endblock %}
      {% block title %}
        <h1 class="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 section--bottom-xl ',
  layout_class: 'rich-text vertical-flow'
} %}
  {% block content %}
    <h2>Send us a message</h2>
    {% include '@mixtape/form/src/form-example.twig' %}
  {% endblock %}
{% endembed %}
{% include '@mixtape/global/src/global-footer.twig' %}

              

                {% include '@mixtape/global/src/global-header.twig' with { link: '/item-mockups-home.html' } %}
{% embed '@mixtape/layout/src/section-background.twig' with {
  layout_class: 'section--xl',
  modifier_class: 'background--reverse'
} %}
  {% block content %}
    {% embed "@mixtape/page/src/page-title.twig" with { modifier_class: 'page-title--hero' } %}
      {% block return %}{% endblock %}
      {% block title %}
        <h1 class="headline">Always put your best foot forward.</h1>
      {% endblock %}
      {% block subtitle %}
        <p class="text--m">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 %}
{% endembed %}
<h2 class="sr-only">Section</h2>
{% embed '@mixtape/layout/src/section.twig' with { modifier_class: 'section--xl' } %}
  {% block content %}
    {% include '@mixtape/content-card/src/content-card.twig' with {
      modifier_class: 'content-card--landscape content-card--right',
      title: 'Key feature or Section Name',
      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 { modifier_class: 'section--xl' } %}
  {% block content %}
    {% include '@mixtape/content-card/src/content-card.twig' with {
      modifier_class: 'content-card--landscape',
      title: 'Key feature or Section Name',
      content: 'A short description to help explain enough about the subject matter to encourage visitors to learn more.',
      image: 'https://picsum.photos/id/56/558/418?grayscale',
    } %}
  {% endblock %}
{% endembed %}
{% embed '@mixtape/layout/src/section.twig' with { modifier_class: 'section--xl', layout_class: 'grid grid--md-3-cols' } %}
  {% block content %}
    {% include '@mixtape/content-card/src/content-card.twig' with {
      title: 'Key feature or Section Name',
      content: 'A short description to help explain enough about the subject matter to encourage visitors to learn more.',
      image: 'https://picsum.photos/id/56/558/418?grayscale',
    } %}
    {% include '@mixtape/content-card/src/content-card.twig' with {
      title: 'Key feature or Section Name',
      content: 'A short description to help explain enough about the subject matter to encourage visitors to learn more.',
      image: 'https://picsum.photos/id/56/558/418?grayscale',
    } %}
    {% include '@mixtape/content-card/src/content-card.twig' with {
      title: 'Key feature or Section Name',
      content: 'A short description to help explain enough about the subject matter to encourage visitors to learn more.',
      image: 'https://picsum.photos/id/56/558/418?grayscale',
    } %}
  {% endblock %}
{% endembed %}
{% embed '@mixtape/layout/src/section.twig' with { modifier_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 { modifier_class: 'section--xl', layout_class: 'grid grid--md-2-cols' } %}
  {% block content %}
    {% embed '@mixtape/content-card/src/content-card.twig' with { image: 'https://picsum.photos/id/56/558/418?grayscale' } %}
      {% block content %}
        <h3>Key feature or Section Name</h3>
        <p class="text--lede">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 { image: 'https://picsum.photos/id/56/558/418?grayscale' } %}
      {% block content %}
        <h3>{{ title | default('Key feature or Section Name')}}</h3>
        <p class="text--lede">{{ 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 { modifier_class: 'section--xl background--alt section--narrow'} %}
  {% block content %}
    {% embed '@mixtape/cta/src/cta.twig' %}
      {% 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 %}
{% include '@mixtape/global/src/global-footer.twig' %}

              

                {% include '@mixtape/global/src/global-header.twig' with { link: '/item-mockups-home.html' } %}
{% 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 {
  modifier_class: 'section--xl'
} %}
  {% block content %}
    {% embed "@mixtape/page/src/page-title.twig" with { modifier_class: '' } %}
      {% block return %}{% endblock %}
      {% block title %}
        <h1 class="headline">Always put your best foot forward.</h1>
      {% endblock %}
      {% block subtitle %}
        <p class="text--m">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 { modifier_class: 'section--xl', layout_class: 'container' } %}
  {% block content %}
    <div class="tiles grid grid--xs-2-cols grid--md-4-cols">
      {% include "@mixtape/tiles/src/tile.twig" with { title: 'Page Name' } only %}
      {% include "@mixtape/tiles/src/tile.twig" with { title: 'Frequently Asked Questions' } only %}
      {% include "@mixtape/tiles/src/tile.twig" with { title: 'History' } only %}
      {% include "@mixtape/tiles/src/tile.twig" with { title: 'General Information' } only %}
      {% include "@mixtape/tiles/src/tile.twig" with { title: 'Page Name' } only %}
      {% include "@mixtape/tiles/src/tile.twig" with { title: 'Page Name' } only %}
      {% include "@mixtape/tiles/src/tile.twig" with { title: 'Page Name' } only %}
      {% include "@mixtape/tiles/src/tile.twig" with { title: 'Page Name' } only %}
    </div>
  {% endblock %}
{% endembed %}
{% embed '@mixtape/layout/src/section.twig' with { modifier_class: 'section--xl' } %}
  {% block content %}
    {% include '@mixtape/cta/src/cta.twig' with { modifier_class: 'cta--narrow' } %}
  {% endblock %}
{% endembed %}
{% include '@mixtape/global/src/global-footer.twig' %}

              

                {% include '@mixtape/global/src/global-header.twig' with { link: '/item-mockups-home.html' } %}
{% 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 {
  modifier_class: 'section--xl'
} %}
  {% block content %}
    {% include "@mixtape/page/src/page-title.twig" with { modifier_class: '' } %}
  {% endblock %}
  {% block background %}{% endblock %}
{% endembed %}
{% embed '@mixtape/layout/src/section.twig' with {
  modifier_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 %}
{% include '@mixtape/global/src/global-footer.twig' %}