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 %}