Banner Onboarding: Default

{% block wrapperStart %}
{% endblock wrapperStart %}
<section class="rtds-banner-onboarding rtds-banner-onboarding--logo rtds-bg-gradient-04 rtds-shadow-md rtds-rounded-lg rtds-overflow-hidden{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">

    <div class="rtds-banner-onboarding__content rtds-grid{% block contentClasses %}{% if contentClasses %} {{ contentClasses }}{% endif %}{% endblock contentClasses %}">
        <div class="rtds-banner-onboarding__logo rtds-flex rtds-justify-center rtds-items-center rtds-py-6 rtds-px-4 md:rtds-px-6"> 
            <img src="{{ logo.path }}" alt=""
                {% if logo.srcset %}srcset="{{ logo.srcset }}"{% endif %}
                {% if logo.sizesAttribute %}sizes="{{ logo.sizesAttribute }}"{% endif %}
                alt="{% if logo.alt %}{{ logo.alt }}{% else %}Logo alt text{% endif %}"
                {% if logo.width %}width="{{ logo.width }}"{% endif %}
                {% if logo.height %}height="{{ logo.height }}"{% endif %}
                >
        </div>

        <div class="rtds-banner-onboarding__text rtds-py-6 rtds-px-4 rtds-grid rtds-gap-2 lg:rtds-gap-3 rtds-content-start">
            {% if srOnlyHeading or title %}
            <h2 class="{% if srOnlyHeading %}rtds-sr-only{% else %}rtds-heading-3 2xl:rtds-text-2xl rtds-leading-tight{% endif %}">
                {% if srOnlyHeading %}{{ srOnlyHeading }}{% endif %}
                {% if title %}{{ title|safe }}{% endif %}
            </h2>
            {% endif %}
            <div class="rtds-banner-onboarding__description">
                <p>{{ description }}</p>
            </div>
        </div>

        <div class="rtds-banner-onboarding__cta rtds-flex rtds-py-6{% block ctaHorizontalPadding %} rtds-px-4{% endblock ctaHorizontalPadding %} rtds-justify-center rtds-items-center{% block ctaMdAlignmentClasses %} md:rtds-justify-end md:rtds-items-end{% endblock ctaMdAlignmentClasses %} ">
            {% for ctaItem in cta %}
                {% render '@button' ~ ctaItem.variant, ctaItem.context , true %}
            {% endfor %}
        </div>

        {% if mainImg %}
            <div class="rtds-banner-onboarding__image rtds-aspect-2-1">
                <img src="{{ mainImg.path }}" alt=""
                    {% if mainImg.srcset %}srcset="{{ mainImg.srcset }}"{% endif %}
                    {% if mainImg.sizesAttribute %}sizes="{{ mainImg.sizesAttribute }}"{% endif %}
                    alt="{% if mainImg.alt %}{{ mainImg.alt }}{% else %}Main img alt text{% endif %}"
                    {% if mainImg.width %}width="{{ mainImg.width }}"{% endif %}
                    {% if mainImg.height %}height="{{ mainImg.height }}"{% endif %}>
            </div>
        {% endif %}

    </div>

</section>
{% block wrapperEnd %}
{% endblock wrapperEnd %}