{% comment %}

Feature card

Input:
- title
- description
- img_url
- example_url
- docs_url
- explore_url

{% endcomment %}

<style>
.card-img-top {
    height: 200px;
    object-position: left top;
}
</style>

<div class="col">
    <div class="card border-0">
        <img src="{{ img_url }}"
             class="card-img-top object-fit-cover rounded-3 shadow"
             alt="{{ img_alt }}"
             width="auto"
             height="auto">

        <div class="card-body">
            <h3 class="h5 card-title">{{ title }}</h3>
            <p class="card-text">{{ description }}</p>

            {% if example_url or docs_url or explore_url %}
                {% if example_url %}
                    <a href="{{ example_url }}" class="card-link">Example</a>
                {% endif %}
                {% if docs_url %}
                    <a href="{{ docs_url }}" class="card-link">Documentation</a>
                {% endif %}
                {% if explore_url %}
                    <a href="{{ explore_url }}" class="card-link">Explore</a>
                {% endif %}
            {% endif %}
        </div>
    </div>
</div>