Enclosure Label Templates

Creating labels from scratch can be tricky, especially if you're not familiar with HTML or CSS. That's why we've put together this guide, specifically designed to help users who struggle with label-making. Here, you'll find ready-made HTML and CSS templates for a variety of label sizes and styles, making it easy to create professional-looking labels without the hassle.

Before you begin, we suggest taking a look at our basic guide to creating labels, which covers the fundamentals. Once you've reviewed the basics, use this guide to quickly implement pre-built templates.

You can also copy a custom config created by other users, or use AI such as ChatGPT to assist you in designing your labels.


Pre-defined Configurations

  • 2.625 x 1 inch (66.7 x 25.4 mm)

HTML:

{% load static %}
<div class="label-box">
    <div class="label">
        <div class="flex-row top-row">
            <h1 class="title">{{ object.title }}</h1>
            <p class="serial">{{ object.serial }}</p>
        </div>
        <div class="flex-row middle-row">
            <div class="details">
                <p>{{ object.category }}</p>
                {% if object.weight %}
                    <p class="weight"><strong>Weight: </strong> {{ object.weight }}g</p>
                {% endif %}
                <p class="traits"><strong>Traits: </strong> 
                {% for trait in object.traits %}
                    {{ trait.name }}{% if not forloop.last %}, {% endif %}
                {% endfor %}</p>
                {% if object.dob %}
                    <p class="dob"><strong>DOB: </strong>{{ object.dob }}</p>
                {% endif %}
            </div>
            <img class="qr-code" src="{{ object.qr_code_url }}">
        </div>
        <div class="bottom-row">
            {% if object.store.logo_url %}
                <img class="store-logo" src="{{ object.store.logo_url }}">
            {% endif %}
        </div>
    </div>
</div>

CSS:

@page {
    size: Letter;
    padding: 0;
    margin: 0;
}

.label-box {
    width: 2.625in;
    height: 1in;
    border-width: 0.01in;
    border-style: solid;
    overflow: hidden;
    margin: 0;
    position: relative;
}

.label {
    margin: 0.05in;
    position: relative;
    font-size: 7pt;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.01in;
}

.title {
    margin: 0;
    font-size: 7pt;
}

.serial {
    margin: 0;
    font-size: 7pt;
    text-align: right;
}

.middle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.01in;
}

.details {
    font-size: 6pt;
    margin-right: 0.1in;
}

.qr-code {
    width: 0.8in;
    height: auto;
}

.weight, .dob, .traits {
    font-size: 5pt;
    margin-bottom: 0.02in;
}

.bottom-row {
    position: absolute;
    bottom: 0;
    right: 0;
}

.store-logo {
    width: 0.4in;
    max-height: 0.2in;
}

  • 6 x 4 inches (152.4 x 101.6 mm)

HTML:

{% load static %}
<div class="label-box">
    <div class="label">
        <div class="flex-row top-row">
            {% if object.sex_icon %}<img class="sex-icon" src="{{ object.sex_icon }}">{% endif %}
            <div class="title-serial">
                <h1>{{ object.title }}</h1>
                <p class="serial">{{ object.serial }}</p>
            </div>
        </div>
        <div class="flex-row middle-row">
            <div class="details">
                <p><strong>Category:</strong> {{ object.category }}</p>
                {% if object.weight %}
                    <p class="weight"><strong>Weight:</strong> {{ object.weight }}g</p>
                {% endif %}
                {% if object.follicle_size %}
                    <p class="follicle-size"><strong>Follicle Size:</strong> {{ object.follicle_size }}</p>
                {% endif %}
                <p class="traits"><strong>Traits:</strong>
                {% for trait in object.traits %}
                    {{ trait.name }} {% if not forloop.last %}, {% endif %}
                {% endfor %}</p>
                {% if object.dob %}
                    <p class="dob"><strong>DOB:</strong> {{ object.dob }}</p>
                {% endif %}
                {% if object.private_notes %}
                    <p class="private-notes"><strong>Notes:</strong> {{ object.private_notes }}</p>
                {% endif %}
                {% if object.offspring_group %}
                    <p class="offspring-group"><strong>Offspring Group:</strong> {{ object.offspring_group }}</p>
                {% endif %}
                {% if object.id %}
                    <p class="id"><strong>ID:</strong> {{ object.id }}</p>
                {% endif %}
            </div>
            <img class="qr-code" src="{{ object.qr_code_url }}">
        </div>
        <div class="bottom-row">
            {% if object.store.logo_url %}
                <img class="store-logo" src="{{ object.store.logo_url }}">
            {% endif %}
            {% if object.logo_url %}
                <img class="additional-logo" src="{{ object.logo_url }}">
            {% endif %}
        </div>
    </div>
</div>

CSS:

table.label-container {
    border-collapse: collapse;
}

table, tr, td, table.label-container, table.label-container tr, table.label-container tr td {
    margin: 0;
    padding: 0;
    border: 0;
}

@page {
    size: Letter;
    margin: 0;
}

.label-box {
    width: 6in;
    height: 4in;
    border: 0.01in solid black;
    overflow: hidden;
    margin: 0;
    position: relative;
}

.label {
    margin: 0.2in;
    font-size: 16pt;
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.top-row {
    margin-bottom: 0.1in;
}

.title-serial {
    flex: 2;
}

.sex-icon {
    width: 1in;
    height: auto;
}

.details {
    flex: 2;
}

.qr-code {
    width: 1.5in;
    height: auto;
}

.bottom-row {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
}

.store-logo {
    width: 30%;
    max-height: 1in;
}

.additional-logo {
    width: 30%;
    max-height: 1in;
}

.traits, .weight, .dob, .private-notes, .follicle-size, .offspring-group, .id {
    font-size: 14pt;
    margin-bottom: 0.05in;
}

  • 4 x 3 inches (101.6 x 76.2 mm)



HTML:


{% load static %}
<div class="label-box">
    <div class="label">
        <div class="flex-row top-row">
            {% if object.sex_icon %}<img class="sex-icon" src="{{ object.sex_icon }}">{% endif %}
            <div class="title-serial">
                <h1>{{ object.title }}</h1>
                <p class="serial">{{ object.serial }}</p>
            </div>
        </div>
        <div class="flex-row middle-row">
            <div class="details">
                <p><strong>Category:</strong> {{ object.category }}</p>
                {% if object.weight %}
                    <p class="weight"><strong>Weight:</strong> {{ object.weight }}g</p>
                {% endif %}
                {% if object.follicle_size %}
                    <p class="follicle-size"><strong>Follicle Size:</strong> {{ object.follicle_size }}</p>
                {% endif %}
                <p class="traits"><strong>Traits:</strong>
                {% for trait in object.traits %}
                    {{ trait.name }} {% if not forloop.last %}, {% endif %}
                {% endfor %}</p>
                {% if object.dob %}
                    <p class="dob"><strong>DOB:</strong> {{ object.dob }}</p>
                {% endif %}
                {% if object.private_notes %}
                    <p class="private-notes"><strong>Notes:</strong> {{ object.private_notes }}</p>
                {% endif %}
                {% if object.offspring_group %}
                    <p class="offspring-group"><strong>Offspring Group:</strong> {{ object.offspring_group }}</p>
                {% endif %}
                {% if object.id %}
                    <p class="id"><strong>ID:</strong> {{ object.id }}</p>
                {% endif %}
            </div>
            <img class="qr-code" src="{{ object.qr_code_url }}">
        </div>
        <div class="bottom-row">
            {% if object.store.logo_url %}
                <img class="store-logo" src="{{ object.store.logo_url }}">
            {% endif %}
            {% if object.logo_url %}
                <img class="additional-logo" src="{{ object.logo_url }}">
            {% endif %}
        </div>
    </div>
</div>

CSS:

table.label-container {
    border-collapse: collapse;
}

table, tr, td, table.label-container, table.label-container tr, table.label-container tr td {
    margin: 0;
    padding: 0;
    border: 0;
}

@page {
    size: Letter;
    margin: 0;
}

.label-box {
    width: 4in;
    height: 3in;
    border: 0.01in solid black;
    overflow: hidden;
    margin: 0;
    position: relative;
}

.label {
    margin: 0.1in;
    font-size: 12pt;
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-row {
    margin-bottom: 0.05in;
}

.title-serial {
    flex: 2;
}

.sex-icon {
    width: 0.8in;
    height: auto;
}

.details {
    flex: 2;
}

.qr-code {
    width: 1in;
    height: auto;
}

.bottom-row {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
}

.store-logo {
    width: 25%;
    max-height: 0.8in;
}

.additional-logo {
    width: 25%;
    max-height: 0.8in;
}

.traits, .weight, .dob, .private-notes, .follicle-size, .offspring-group, .id {
    font-size: 11pt;
    margin-bottom: 0.03in;
}

Still need help? Contact Us Contact Us