Mockups
Content 6.1
Open in new window
Twig:
mockups/content.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">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' %}
Form 6.2
Open in new window
Twig:
mockups/form.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' %}
Home 6.3
Open in new window
Twig:
mockups/home.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' %}
Index 6.4
Open in new window
Twig:
mockups/index.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' %}
Sidebar 6.5
Open in new window
Twig:
mockups/sidebar.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' %}