example-component.dev.twig

{% if is_front %}
  {{ include('@uno/../components/hero-2/hero-2.example.twig') }}
  {{ include('@uno/../components/layout-4-col/layout-4-col.example.twig', { directory }, with_context = false) }}
  {{ include('@uno/../components/logo-grid/logo-grid.example.twig', { directory }, with_context = false) }}
  {{ include('@uno/../components/accordion/accordion-group/accordion-group.example.twig', with_context = false) }}
  {% embed 'uno:layout-4-col' with {
    container_size: 'wide',
    theme: 'light',
    directory,
    } only %}
    {% block content_above %}
      {{ include('uno:title-cta', {
        layout: 'centered',
        title: 'We offer icons for everyone',
        button: {
          href: 'http://www.example.com',
          text: 'See icons',
          style: 'primary',
          size: 'large',
          suffix_icon: 'arrow-right',
        }
    }, with_context = false) }}
    {% endblock %}

    {% block content_first %}
      {{ include('@uno/../components/icon-card/icon-card.example.twig', with_context = false) }}
    {% endblock %}

    {% block content_second %}
      {{ include('@uno/../components/icon-card/icon-card.example.twig', with_context = false) }}
    {% endblock %}

    {% block content_third %}
      {{ include('@uno/../components/icon-card/icon-card.example.twig', with_context = false) }}
    {% endblock %}

    {% block content_fourth %}
      {{ include('@uno/../components/icon-card/icon-card.example.twig', with_context = false) }}
    {% endblock %}
  {% endembed %}

  {% embed 'uno:layout-1-col' with {
    container_size: 'wide',
    theme: 'dark',
    directory,
    } only %}
    {% block content_above %}
      {{ include('uno:title-cta', {
        layout: 'centered',
        title: 'Watch this excellent video from Mike\'s trip to the Grand Canyon',
        button: {
          href: 'http://www.example.com',
          text: 'See the Grand Canyon',
          style: 'primary',
          size: 'large',
          suffix_icon: 'arrow-right',
        }
    }, with_context = false) }}
    {% endblock %}

    {% block content_first %}
      {{ include('@uno/../components/video-player/video-player.example.twig', { directory }, with_context = false) }}
    {% endblock %}
  {% endembed %}

  {% embed 'uno:layout-2-col' with {
    container_size: 'wide',
    theme: 'primary',
    directory,
    } only %}
    {% block content_first %}
      {{ include('@uno/../components/promo/promo.example.twig', with_context = false) }}
    {% endblock %}
    {% block content_second %}
      <img src="{{ '/' ~ directory ~ '/images/example-images/example.webp'}}" alt="">
    {% endblock %}
  {% endembed %}

  {% embed 'uno:layout-4-col' with {
    container_size: 'wide',
    theme: 'black',
    directory,
    } only %}
    {% block content_above %}
      {{ include('uno:title-cta', {
        layout: 'normal',
        title: 'Latest News',
        button: {
          href: 'http://www.example.com',
          text: 'See all news',
          style: 'primary',
          size: 'large',
          suffix_icon: 'arrow-right',
        }
    }, with_context = false) }}
    {% endblock %}

    {% block content_first %}
      {{ include('@uno/../components/card/card.example.twig', { directory }, with_context = false) }}
    {% endblock %}

    {% block content_second %}
      {{ include('@uno/../components/card/card.example.twig', { directory }, with_context = false) }}
    {% endblock %}

    {% block content_third %}
      {{ include('@uno/../components/card/card.example.twig', { directory }, with_context = false) }}
    {% endblock %}

    {% block content_fourth %}
      {{ include('@uno/../components/card/card.example.twig', { directory }, with_context = false) }}
    {% endblock %}
  {% endembed %}

  {{ include('@uno/../components/tabs/tab-group/tab-group.example.twig', with_context = false) }}
  {{ include('@uno/../components/tabs/tab-group/tab-group.example-horizontal.twig', with_context = false) }}
{% endif %}