specimen-choice.html

<style>
    .specimen-choice-card {
        width: 250px;
        line-height: 1.2;
    }
    .specimen-choice-card:not(:first-child) {
        margin-top: 0.5rem;
    }
    .specimen-choice-card__container {
        justify-content: center;
    }
    .specimen-choice-card__link,
    .specimen-choice-card__link:hover,
    .specimen-choice-card__link:focus {
        text-decoration: none;
        color: #00b74f;
    }
    .specimen-choice-card__img {
        width: 80px;
    }
    @media only screen and (min-width: 768px) {
        .specimen-choice-card {
            margin-right: 1rem;
        }
        .specimen-choice-card:not(:first-child) {
            margin-top: 0;
        }
    }
</style>

<div class="d-flex flex-wrap justify-content-center justify-content-lg-start mt-2 mb-4">
    <div class="card specimen-choice-card p-3 mr-3">
        <a href="!#" class="specimen-choice-card__link" ic-target="#specimen_panel" ic-trigger-on="click" ic-get-from="/data/specimen/ICDB000062/" ic-src="/data/specimen/ICDB000062/" ic-deps="ignore">
            <div class="d-flex specimen-choice-card__container">
                <img src="https://dev.insectcolor.com/storage/Processed/Image/ICDB000062/ICDB000062-img-01-trans_thumbnail_vertical.png" class="d-block specimen-choice-card__img">
                <div class="text-center my-auto">
                    <em> ICDB000062</em><br>
                    <div class="mt-2 mb-1">
                        <!-- macro_availabilityicons -->
                        <span class="fas fa-camera text-primary" data-toggle="tooltip" title="" data-original-title="Image data"></span>
                        <span class="fas fa-chart-area text-primary" data-toggle="tooltip" title="" data-original-title="Reflectance data"></span>
                        <span class="fas fa-microscope" data-toggle="tooltip" title="" style="color:lightgrey;" data-original-title="No TEM data"></span>
                    </div>
                    <small class="no-underline">
                        Holotype
                        adult
                        Female
                    </small>
                </div>
            </div>
        </a>
    </div>
    <div class="card specimen-choice-card p-3 mr-3">
        <a href="!#" class="specimen-choice-card__link" ic-target="#specimen_panel" ic-trigger-on="click" ic-get-from="/data/specimen/ICDB000016/" ic-src="/data/specimen/ICDB000016/" ic-deps="ignore">
            <div class="d-flex specimen-choice-card__container">
                <img src="/static/generic_beetle_vertical.png" class="d-block specimen-choice-card__img">
                <div class="text-center my-auto">
                    <em> ICDB000016</em><br>
                    <div class="mt-2 mb-1">
                        <!-- macro_availabilityicons -->
                        <span class="fas fa-camera" data-toggle="tooltip" title="" style="color:lightgrey;" data-original-title="No image data"></span>
                        <span class="fas fa-chart-area" data-toggle="tooltip" title="" style="color:lightgrey;" data-original-title="No reflectance data"></span>
                        <span class="fas fa-microscope" data-toggle="tooltip" title="" style="color:lightgrey;" data-original-title="No TEM data"></span>
                    </div>
                    <small class="no-underline">
                        Adult
                    </small>
                </div>
            </div>
        </a>
    </div>
</div>