Block Hero

Eye-catching hero section for landing pages.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Theme: Bootstrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Size: mini (bootstrap)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Size: small ()

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Size: medium ()

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Size: large ()

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Size: full ()

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

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

{% block content %}
<twig:block-hero
    background="{{ base_path }}/img/block-hero.jpeg"
    title="Lorem ipsum"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    :buttons="[
        {
            text: 'Derafu ORG',
            url: 'https://www.derafu.org'
        }
    ]"
    align="left"

/>

<br/>

<twig:block-hero
    background="{{ base_path }}/img/block-hero.jpeg"
    contentBackground="true"
    title="Lorem ipsum"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    :buttons="[
        {
            text: 'Derafu ORG',
            url: 'https://www.derafu.org'
        }
    ]"
    align="left"

/>

<br/>

<twig:block-hero
    background="{{ base_path }}/img/block-hero.jpeg"
    title="Lorem ipsum"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    :buttons="[
        {
            text: 'Derafu ORG',
            url: 'https://www.derafu.org'
        }
    ]"
    align="right"

/>

<br/>

{% for theme, name in themes %}
    <twig:block-hero
        title="Theme: {{ name }}"
        subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        :buttons="[
            {
                text: 'Derafu ORG',
                url: 'https://www.derafu.org'
            },
            {
                text: 'Example.com',
                url: 'https://www.example.com'
            }
        ]"

    />
    <br/>
{% endfor %}

{% set sizes = ['mini', 'small', 'medium', 'large', 'full'] %}
{% set theme_keys = themes|keys %}
{% for size in sizes %}
    {% set theme_key = theme_keys[loop.index0] %}
    <twig:block-hero
        size="{{ size }}"
        background="{{ base_path }}/img/block-hero.jpeg"
        title="Size: {{ size }} ({{ theme_keys[loop.index0] }})"
        subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        :buttons="[
            {
                text: 'Example.com',
                url: 'https://www.example.com'
            }
        ]"
        align="right"

    />
    <br/>
{% endfor %}

{% endblock %}