Elements

                {% embed '@mixtape/accordion/src/accordion.twig' with { modifier_class: 'accordion--divided' } %}
  {% block summary %}
    <summary class="accordion__toggle">
      {{ title | default('Accordion example') }}
      <span class="button icon button--extra-small button--primary button--icon-only icon--chevron-down" aria-hidden="true"></span>
    </summary>
  {% endblock %}
{% endembed %}
{% embed '@mixtape/accordion/src/accordion.twig' with { modifier_class: 'accordion--divided' } %}
  {% block summary %}
    <summary class="accordion__toggle">
      {{ title | default('Another accordion example') }}
      <span class="button icon button--extra-small button--primary button--icon-only icon--chevron-down" aria-hidden="true"></span>
    </summary>
  {% endblock %}
  {% block content %}
    <p>This other content is hidden inside the accordion body until it is disclosed by clicking the accordion toggle.</p>
  {% endblock %}
{% endembed %}
{% embed '@mixtape/accordion/src/accordion-div.twig' with { modifier_class: 'accordion--divided' } %}
  {% block summary %}
    <button type="button" class="accordion__toggle">
      {{ title | default('A div accordion example') }}
      <span class="button icon button--extra-small button--primary button--icon-only icon--chevron-down" aria-hidden="true"></span>
    </button>
  {% endblock %}
  {% block content %}
    <p>This other content is hidden inside the accordion body until it is disclosed by clicking the accordion toggle.</p>
  {% endblock %}
{% endembed %}
{% embed '@mixtape/accordion/src/accordion-mobile.twig' with { modifier_class: 'accordion--divided' } %}
  {% block summary %}
    <summary class="accordion__toggle">
      {{ title | default('A mobile only example that should be open on Desktop') }}
      <span class="button icon button--extra-small button--primary button--icon-only icon--chevron-down" aria-hidden="true"></span>
    </summary>
  {% endblock %}
  {% block content %}
    <p>This other content is hidden inside the accordion body until it is disclosed by clicking the accordion toggle.</p>
  {% endblock %}
{% endembed %}

              

                <div class="button-group">
  <a href="#" class="button button--primary icon icon--arrow-left button--icon-only {{ modifier_class }}">Previous</a>
  <a href="#" class="button button--primary icon icon--more button--icon-only {{ modifier_class }}">Middle</a>
  <a href="#" class="button button--primary icon icon--arrow-right button--icon-only {{ modifier_class }}">Next</a>
</div>

              

                <a href="{{ href|default('#') }}" class="button icon button--large {{ modifier_class }}">{{ text|default('Button Icon') }}</a>

<a href="{{ href|default('#') }}" class="button icon {{ modifier_class }}">{{ text|default('Button Icon') }}</a>

<a href="{{ href|default('#') }}" class="button icon button--small {{ modifier_class }}">{{ text|default('Button Icon') }}</a>

<a href="{{ href|default('#') }}" class="button icon button--extra-small {{ modifier_class }}">{{ text|default('Button Icon') }}</a>


              

                <a href="{{ href|default('#') }}" class="button icon button--large {{ modifier_class }}">{{ text|default('Button Icon') }}</a>

<a href="{{ href|default('#') }}" class="button icon {{ modifier_class }}">{{ text|default('Button Icon') }}</a>

<a href="{{ href|default('#') }}" class="button icon button--small {{ modifier_class }}">{{ text|default('Button Icon') }}</a>

<a href="{{ href|default('#') }}" class="button icon button--extra-small {{ modifier_class }}">{{ text|default('Button Icon') }}</a>


              

                <a class="button button--primary button--large" href="#">Primary button</a>

<a class="button button--primary" href="#">Primary button</a>

<a class="button button--primary button--small" href="#">Primary button</a>

<a class="button button--primary button--extra-small" href="#">Primary button</a>

              

                <a class="button button--reverse button--large" href="#">Reverse button</a>

<a class="button button--reverse" href="#">Reverse button</a>

<a class="button button--reverse button--small" href="#">Reverse button</a>

<a class="button button--reverse button--extra-small" href="#">Reverse button</a>

              

                <a class="button button--secondary button--large" href="#">Secondary button</a>

<a class="button button--secondary" href="#">Secondary button</a>

<a class="button button--secondary button--small" href="#">Secondary button</a>

<a class="button button--secondary button--extra-small" href="#">Secondary button</a>

              

                <a class="button button--tertiary button--large" href="#">Primary Reverse button</a>

<a class="button button--tertiary" href="#">Primary Reverse button</a>

<a class="button button--tertiary button--small" href="#">Primary Reverse button</a>

<a class="button button--tertiary button--extra-small" href="#">Primary Reverse button</a>

              

                <div class="container">
  <article class="content-card {{ clickable_class }} {{ modifier_class }}">
    <figure class="content-card__media stack">
      <div class="skeleton skeleton--bg"></div>
      {% block media %}
      <img loading="lazy" src="{{ image|default('https://picsum.photos/id/56/558/418?grayscale')}}" width="{{ image_width|default('558') }}" height="{{ image_height|default('418') }}" alt="{{ image_alt }}">
      {% endblock %}
    </figure>
    <div class="content-card__content vertical-flow-flex">
      {% block content %}
      <h3>{{ title|default('Card Title')}}</h3>
      <p class="text--lede">{{ content|default('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')}}</p>
      <a href="{{ link|default('#') }}" class="link--more">{{ link_text|default('Learn more')}}</a>
      {% endblock %}
    </div>
  </article>
</div>

              

                {% embed '@mixtape/layout/src/section.twig' with {
  modifier_class: 'section--l',
  layout_class: 'grid grid--md-3-cols'
} %}
  {% block content %}
    {% include '@mixtape/content-card/src/content-card.twig' %}
    {% include '@mixtape/content-card/src/content-card.twig' %}
    {% include '@mixtape/content-card/src/content-card.twig' %}
  {% endblock %}
{% endembed %}

              

                {% extends '@mixtape/content-card/src/content-card.twig' %}
{% set clickable_class = 'content-card--clickable' %}

              

                {% embed '@mixtape/layout/src/section.twig' with {
  modifier_class: 'section--l section--narrow',
} %}
  {% block content %}
    {% include '@mixtape/cta/src/cta.twig' %}
  {% endblock %}
{% endembed %}

              

                <p><a href="#{{ id|default('dialog-df') }}" class="button button--primary is-excluded">{{ title | default('Open Me') }}</a></p>

<mx-dialog id="{{ id|default('dialog-df') }}" data-modal>
  <dialog class="dialog">
    <button autofocus class="button button--icon-only button--secondary icon icon--close" data-close>Close dialog</button>
    <div class="dialog__content vertical-flow">
      {% block content %}
        <h3>Thanks you're almost done!</h3>
        <p>To finish the process you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?</p>
      {% endblock %}
    </div>
    {% block actions %}
      <div class="form__actions">
        <button class="button button--primary" data-close>Let's get started</button>
        <button class="button button--secondary" data-close>Cancel</button>
      </div>
    {% endblock %}
  </dialog>
</mx-dialog>

              

                <button aria-controls="{{ id|default('dialog-fs') }}" class="button button--primary is-excluded">{{ title | default('Open Me') }}</button>

<mx-dialog id="{{ id|default('dialog-fs') }}" data-modal>
  <dialog class="dialog dialog--fullscreen">
    <button autofocus class="button button--icon-only button--secondary icon icon--close" data-close>Close dialog</button>
    <div class="dialog__content vertical-flow">
      {% block content %}
        <h3>Thanks you're almost done!</h3>
        <p>To finish the process you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?</p>
        <button class="button button--primary" data-close>Let's get started</button>
      {% endblock %}
    </div>
  </dialog>
</mx-dialog>

              

                {% set id = id|default('dropdown-menu') %}
{% set name = id ~ '-target' %}
{% set label = label|default('Categories') %}
{% set options = options|default([
  { label: 'News', href: '#news' },
  { label: 'Events', href: '#events' },
  { label: 'Stories', id: 'stories' },
]) %}
<button
    id="{{ name }}"
    class="drop-menu__trigger button button--primary icon icon--chevron-down icon--end"
    popovertarget="{{ id }}"
>
  {{ label }}
</button>
<div
    class="drop-menu"
    id="{{ id }}"
    aria-labelledby="{{ name }}"
    anchor="{{ name }}"
    popover
>
  {% for option in options %}
    {% if option.href %}
      <a href="{{ option.href }}">{{ option.label }}</a>
    {% else %}
      <button type="button" data-id="{{ option.id }}">{{ option.label }}</button>
    {% endif %}
  {% endfor %}
</div>


              

                {% set id = id|default('expandable-menu') %}
{% set name = id ~ '-target' %}
{% set label = label|default('Categories') %}
{% set options = options|default([
  { label: 'News', href: '#news' },
  { label: 'Events', href: '#events' },
  { label: 'Stories', id: 'stories' },
]) %}
<div class="container" style="--container-name: drop-menu">
  <button
      id="{{ name }}"
      class="drop-menu__trigger button button--primary icon icon--chevron-down icon--end"
      popovertarget="{{ id }}"
      aria-controls="{{ id }}"
      aria-expanded="false"
  >
    {{ label }}
  </button>
  <div
      class="drop-menu"
      id="{{ id }}"
      aria-labelledby="{{ name }}"
      anchor="{{ name }}"
      popover
  >
    {% for option in options %}
      {% if option.href %}
        <a href="{{ option.href }}">{{ option.label }}</a>
      {% else %}
        <button type="button" data-id="{{ option.id }}">{{ option.label }}</button>
      {% endif %}
    {% endfor %}
  </div>
</div>

              

                {% embed '@mixtape/layout/src/section.twig' with {
  layout_class: 'grid'
} %}
  {% block content %}
    <div class="grid--6-col">
      {% include '@mixtape/link-list/src/link-list.twig' %}
    </div>
    <div class="grid--6-col">
      {% include '@mixtape/link-list/src/link-list.twig' %}
    </div>
  {% endblock %}
{% endembed %}

              

                <a class="logo {{ modifier_class }}" href="{{ link | default('#') }}">
  <img alt="{{ sitename | default('Mixtape') }}" src="{{ logo_src | default('images/mixtape-logo.png') }}" width="120" height="49" />
</a>

              

                {% set id = 'message-' ~ random() %}
<div class="message message--has-close {{ modifier_class }}" id="{{ id }}" data-closable-message>
  <div class="message__content">
    {% block content %}
    <p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p>
    {% endblock %}
  </div>
</div>

              

                <nav class="nav {{ modifier_class }}">
  {% block menu %}
  <ul>
    <li><a href="#">Secondary Title</a></li>
    <li><a href="#">Secondary Title</a></li>
    <li><a href="#">Secondary Title</a></li>
  </ul>
  {% endblock %}
</nav>

              

                {% spaceless %}
  <nav class="nav nav--inline nav--breadcrumb {{ modifier_class }}">
    {% block crumbs %}
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Level 1</a></li>
      <li><a href="#">Level 2</a></li>
      <li>Current Page</li>
    </ul>
    {% endblock %}
  </nav>
{% endspaceless %}

              

                <nav class="nav nav--collapsible" data-nav>
  {% block menu %}
    {% include '@mixtape/navigation/src/navigation-subnav-list.twig' %}
  {% endblock %}
</nav>

              

                <nav class="nav nav--dropdown {{ modifier_class }}" data-nav-flyout>
  {% block menu %}
    {% include '@mixtape/navigation/src/navigation-subnav-list.twig' %}
  {% endblock %}
</nav>

              

                <nav class="nav nav--footer {{ modifier_class }}">
  {% block menu %}
    {% include '@mixtape/navigation/src/navigation-subnav-list.twig' %}
  {% endblock %}
</nav>

              

                <nav class="nav nav--list {{ modifier_class }}">
  <h4 class="text--embellished-headline">{{ title|default('Jump To Section') }}</h4>
  {% block list %}
  <ul>
    <li>
      <a href="#" aria-current="page">Section Title</a>
    </li>
    <li>
      <a href="#">Longer Section Title</a>
    </li>
    <li>
      <a href="#">Section Title</a>
    </li>
    <li>
      <a href="#">Longer Section Title</a>
    </li>
    <li>
      <a href="#">Section Title</a>
    </li>
    <li>
      <a href="#">Longer Section Title</a>
    </li>
  </ul>
  {% endblock %}
</nav>

              

                <nav class="nav nav--dropdown nav--mega-nav {{ modifier_class }}" data-nav-flyout>
  {% block menu %}
    {% include '@mixtape/navigation/src/navigation-subnav-list.twig' with { 'mega' : true } %}
  {% endblock %}
</nav>

              

                <nav class="nav nav--list nav--ordered {{ modifier_class }}">
  {% block list %}
  <ul class="nav__level-1">
    <li>
      <a href="#">1. First Item</a>
      <ul class="nav__level-2">
        <li>
          <a href="#">Section Title</a>
        </li>
        <li>
          <a href="#">Longer Section Title</a>
        </li>
        <li>
          <a href="#" aria-current="page">Section Title</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">2. Second Item</a>
      <ul class="nav__level-2">
        <li>
          <a href="#">Section Title</a>
        </li>
        <li>
          <a href="#">Longer Section Title that breaks onto a second line</a>
        </li>
        <li>
          <a href="#">Section Title</a>
        </li>
      </ul>
    </li>
    <li>
      <span>3. Third Item</span>
      <ul class="nav__level-2">
        <li>
          <a href="#">Section Title</a>
        </li>
        <li>
          <a href="#">Longer Section Title</a>
        </li>
        <li>
          <a href="#">Section Title</a>
        </li>
        <li>
          <a href="#">Longer Section Title</a>
        </li>
        <li>
          <a href="#">Section Title</a>
        </li>
        <li>
          <a href="#">Longer Section Title</a>
        </li>
      </ul>
    </li>
  </ul>
  {% endblock %}
</nav>

              

                {% set items = items|default({
  "previous": {
    "href": "#",
    "text": "Previous"
  },
  "next": {
    "href": "#",
    "text": "Next"
  },
  "pages": {
    "1": {"href": "#"},
    "2": {"href": "#"},
    "3": {"href": "#"},
    "4": {"href": "#"},
    "5": {"href": "#"},
    "ellipsis": {},
    "12": {"href": "#"}
  }
}) %}
<nav aria-label="Pagination" class="pagination" role="navigation">
  <ul class="pagination__items">
    {% if items.previous %}
      <li class="pagination__previous">
        <a href="{{ items.previous.href }}" class="icon icon--arrow-left" {{ items.previous.attributes }}>{{ items.previous.text }}</a>
      </li>
    {% endif %}
    {% for key, item in items.pages %}
      {% if current|default("1") == key %}
        <li aria-current="page" class="pagination__item">{{ key }}</li>
      {% elseif key == "ellipsis" %}
        <li class="pagination__ellipsis">&hellip;</li>
      {% else %}
        <li class="pagination__item">
          <a href="{{ item.href }}" {{ item.attributes }}>{{ key }}</a>
        </li>
      {% endif %}
    {% endfor %}
    {% if items.next %}
      <li class="pagination__next">
        <a href="{{ items.next.href }}" class="icon icon--arrow-right" {{ item.next.attributes }}>{{ items.next.text }}</a>
      </li>
    {% endif %}
  </ul>
</nav>

              

                <div class="previous-next">
  <div class="previous-next__link">
    {% if page_previous != 'null' %}
    <a href="{{ page_previous_link|default('#') }}" class="previous-next__prev">
      <div class="previous-next__title">Previous</div>
      <div class="previous-next__page-title">{{ page_previous|default('Category Title') }}</div>
    </a>
    {% endif %}
  </div>
  <div class="previous-next__link">
    {% if page_next != 'null' %}
    <a href="{{ page_next_link|default('#') }}" class="previous-next__next">
      <div class="previous-next__title">Next</div>
      <div class="previous-next__page-title">{{ page_next|default('Category Title') }}</div>
    </a>
    {% endif %}
  </div>
</div>

              

                <div class="global__secondary section section__full section--top-xs section--bottom-xs background--reverse foreground--reverse">
  <div class="flex">
    {% block left %}
      <span class="text--s">Global message</span>
    {% endblock %}
    {% block right %}
      {% include "@mixtape/navigation/src/navigation.twig" with { 'modifier_class': 'global__secondary__nav nav--inline text--s' } %}
    {% endblock %}
  </div>
</div>

              

                {% set rand = random() %}
{% set tabs = tabs|default([
  {
    id: 'tab-1-' ~ rand,
    title: 'Lorem ipsum',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    image: 'https://picsum.photos/id/56/558/418?grayscale',
    active: true,
  },
  {
    id: 'tab-2-' ~ rand,
    title: 'Ut enim',
    content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
    image: 'https://picsum.photos/id/56/558/418?grayscale',
  },
  {
    id: 'tab-3-' ~ rand,
    title: 'Excepteur sint',
    content: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    image: 'https://picsum.photos/id/56/558/418?grayscale',
  }
]) %}

<div class="tabs tabs--same-height {{ modifier_class }}" data-tabs>
  {% include '@mixtape/tabs/src/tab-list.twig' with {
    tabs: tabs,
    modifier_class: 'button button--small'
  } %}
  {% for tab in tabs %}
    {% embed '@mixtape/tabs/src/panel.twig' with { tab: tab } %}
      {% block content %}
        {% if (loop.index is even) %}
          {% include '@mixtape/content-card/src/content-card.twig' with {
            modifier_class: 'content-card--landscape',
            title: tab.title,
            content: tab.content,
            image: tab.image,
          } %}
        {% else %}
          {% include '@mixtape/content-card/src/content-card.twig' with {
            modifier_class: 'content-card--landscape content-card--right',
            title: tab.title,
            content: tab.content,
            image: tab.image,
          } %}
        {% endif %}
      {% endblock %}
    {% endembed %}
  {% endfor %}
</div>

              

                <a href="#" class="tag {{ modifier_class}}">
  {{ tag_content | default('Tag content') }}
</a>

              

                <div class="tiles grid grid--xs-2-cols grid--md-4-cols spacing--bottom-l">
  {% include "@mixtape/tiles/src/tile.twig" %}
  {% include "@mixtape/tiles/src/tile.twig" %}
  {% include "@mixtape/tiles/src/tile.twig" %}
  {% include "@mixtape/tiles/src/tile.twig" %}
</div>
<div class="tiles grid grid--md-3-cols tiles--medium">
  {% include "@mixtape/tiles/src/tile.twig" %}
  {% include "@mixtape/tiles/src/tile.twig" %}
  {% embed "@mixtape/tiles/src/tile.twig" with { modifier_class: 'tile--has-link' } %}
    {% block content %}
      <h3 class="text--m">{{ title | default('Tile title') }}</h3>
      <p>Tile with some content</p>
      <a href="#" class="link align--bottom">{{ link | default('read more') }}</a>
    {% endblock %}
    {% block link %}{% endblock %}
  {% endembed %}
</div>