emus/templates/games/_game_card.html

<div class="card" >
    <div class="row no-gutters">
        <div class="col-auto">
        {% if game.screenshot %}
        <img src="{{game.screenshot.url}}" class="img-fluid" alt="Screenshot of {{game.name}}">
        {% elif game.marquee %}
        <img src="{{game.marquee.url}}" class="img-fluid" alt="Title of {{game.name}}">
        {% else %}
        <h2>{{game.name}}</h2>
        {% endif %}
        </div>
        <div class="col">
            <div class="card-block px-2">
                <h4 class="card-title">{{game.name}}{% if game.region %} [{{game.region}}]{% endif %}</h4>
                <p class="card-text">{{game.description|truncatechars:220}}</p>
                <a href="{{game.get_absolute_url}}" class="btn btn-primary">More</a>
                <a href="{{game.rom_file.url}}" class="btn btn-alert">Download</a>
            </div>
        </div>
    </div>
    <div class="card-footer w-100 text-muted">
        <a href="{{game.game_system.get_absolute_url}}">
            <span class="system-badge badge badge-success {{game.game_system.retropie_slug}}">{{game.game_system.name|upper}}</span>
        </a>
        <b>&nbsp;&nbsp;{{game.rating_by_100}}/100</b>

        <div id="genre-badges" style="float:right">
        {% for genre in game.genre.all %}
        <a href="{{genre.get_absolute_url}}">
            <span class="badge">{{genre.name}}</span>
        </a>
        {% endfor %}
        </div>
    </div>
</div>
<br />