{# derafu_twig:templates/pages/components/block-hero.html.twig #}

{% extends 'layouts/default.html.twig' %}

{% block content %}

<twig:block-hero
   class="my-4"
   align="left"
   background="{{ base_path }}/img/block-hero.jpeg"
   title="Lorem <a href='https://www.example.com/' target='_blank'>ipsum</a>"
   subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
   :buttons="[
       {
           text: 'Example.com',
           url: 'https://www.example.com'
       }
   ]"
/>

<twig:block-hero
   class="my-4"
   align="left"
   background="{{ base_path }}/img/block-hero.jpeg"
   contentBackground="true"
   title="Lorem ipsum"
   subtitle="Lorem ipsum dolor sit amet, consectetur <a href='https://www.example.com/' target='_blank'>adipiscing elit.</a>"
   :buttons="[
       {
           text: 'Example.com',
           url: 'https://www.example.com'
       }
   ]"
/>

<twig:block-hero
   class="my-4"
   align="right"
   background="{{ base_path }}/img/block-hero.jpeg"
   title="Lorem ipsum"
   subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
   :buttons="[
       {
           text: 'Example.com',
           url: 'https://www.example.com'
       }
   ]"
/>

<twig:block-hero
    class="my-4"
    title="Hero"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    :buttons="[
        {
            text: 'Example.com 1',
            url: 'https://www.example.com'
        },
        {
            text: 'Example.com 2',
            url: 'https://www.example.com'
        }
    ]"
/>

{% set sizes = ['mini', 'small', 'medium', 'large', 'full'] %}
{% for size in sizes %}
   <twig:block-hero
       class="my-4"
       align="right"
       size="{{ size }}"
       background="{{ base_path }}/img/block-hero.jpeg"
       title="Size: {{ size }}"
       subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       :buttons="[
           {
               text: 'Example.com',
               url: 'https://www.example.com'
           }
       ]"
   />
{% endfor %}

{% endblock %}