web2019/templates/shortcodes/layout_funding.html

{% if position == "left" %}

<div class="card mb-3 shadow" style="max-width: 80%;margin-right: 20%;">
    <div class="row g-0">
        <div class="col-md-4 funding-logo-start d-flex p-1 justify-content-center">
            {% if logo %}
                {% if logo_link %}<a href="{{ logo_link }}" class="align-self-center">{% endif %}
                    <img src="{{ logo }}" class="img-fluid rounded" alt="{{ logo_alt }}"/>
                {% if logo_link %}</a>{% endif %}
            {% endif %}
        </div>
        <div class="col-md-8">
            <div class="card-body">
                {% if title %}<h5 class="card-title">{{ title | markdown | safe }}</h5>{% endif %}
                {% if icon %}
                    <span class="badge bg-transparent position-absolute top-0 start-100 translate-middle-x">
                        <img src="{{ icon }}" alt="{{ icon }}" class="rounded"
                             style="height: 2rem;"/>
                    </span>
                {% endif %}
                <p class="card-text">{{ body | markdown | safe }}</p>
            </div>
        </div>
    </div>
</div>

{% elif position == "right" %}

<div class="card mb-3 shadow" style="max-width: 80%;margin-left: 20%;">
    <div class="row g-0">
        <div class="col-md-8">
            <div class="card-body">
                {% if title %}<h5 class="card-title text-end">{{ title | markdown | safe }}</h5>{% endif %}
                {% if icon %}
                    <span class="badge bg-transparent position-absolute top-0 start-0 translate-middle-x">
                        <img src="{{ icon }}" alt="{{ icon }}" class="rounded"
                     style="height: 2rem;"/>
                    </span>
                {% endif %}
                <p class="card-text">{{ body | markdown | safe }}</p>
            </div>
        </div>
        <div class="col-md-4 funding-logo-end d-flex p-1 justify-content-center">
            {% if logo %}
                {% if logo_link %}<a href="{{ logo_link }}" class="align-self-center">{% endif %}
                    <img src="{{ logo }}" class="img-fluid rounded" alt="{{ logo_alt }}"/>
                {% if logo_link %}</a>{% endif %}
            {% endif %}
        </div>
    </div>
</div>

{% else %}

<div class="card mb-3 shadow-sm" style="max-width: 100%;">
    <div class="row g-0">
        <div class="col-md-12">
            <div class="card-body">
                {% if title %}<h4 class="card-title text-center">{{ title | markdown | safe }}</h4>{% endif %}
                <p class="card-text">{{ body | markdown | safe }}</p>
            </div>
        </div>
    </div>
</div>

{% endif %}