Semantic UI Twig Template

semantic-ui-twig-template.html

<div class="bg">
    <div class="bg-img" style="background-image: url({{page.backgroundImageUrl}});"></div>
</div>
<div class="ui two column stackable grid container">
    <!-- Text Column -->
    <div class="column">
        <h1>{{page.title}}</h1>
        {% if page.text is iterable %}
            {% for paragraph in page.text %}
                <p>{{paragraph|raw}}</p>
            {% endfor %}
        {% else %}
            <p>{{page.text|raw}}</p>
        {% endif %}
    </div>
    <!-- Image Column -->
    <div class="column center aligned">
        <img src="{{page.imageUrl}}" alt="color city">
    </div>
</div>