Barcode Displays

<div class="uk-bc-card">
    <div class="uk-bc-bars"></div>
    <div class="uk-bc-num">123456789012</div>
</div>

<style>
    .uk-bc-card {
        display: inline-flex; flex-direction: column; align-items: center;
        background: #fff; padding: 1rem 2rem; border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
    }
    .uk-bc-bars {
        width: 200px; height: 60px; margin-bottom: 0.5rem;
        background: repeating-linear-gradient(90deg, #0f172a, #0f172a 2px, transparent 2px, transparent 4px, #0f172a 4px, #0f172a 5px, transparent 5px, transparent 9px);
    }
    .uk-bc-num { font-family: monospace; font-size: 1rem; letter-spacing: 0.2em; color: #0f172a; }
</style>

<div class="uk-bc-product">
    <div class="uk-bc-prod-name">Wireless Headphones</div>
    <div class="uk-bc-bars-small"></div>
    <div class="uk-bc-prod-price">$129.99</div>
    <div class="uk-bc-prod-sku">SKU: 8942-XZ</div>
</div>

<style>
    .uk-bc-product {
        display: inline-flex; flex-direction: column; align-items: center;
        background: #fff; padding: 1.5rem; border: 1px dashed #cbd5e1;
        border-radius: 0.5rem; width: 200px; text-align: center;
    }
    .uk-bc-prod-name { font-weight: 700; font-size: 0.95rem; color: #0f172a; margin-bottom: 0.75rem; }
    .uk-bc-bars-small {
        width: 140px; height: 40px; margin-bottom: 0.75rem;
        background: repeating-linear-gradient(90deg, #0f172a, #0f172a 1px, transparent 1px, transparent 3px, #0f172a 3px, #0f172a 4px, transparent 4px, transparent 6px);
    }
    .uk-bc-prod-price { font-size: 1.25rem; font-weight: 800; color: #1e3a8a; margin-bottom: 0.25rem; }
    .uk-bc-prod-sku { font-size: 0.75rem; font-family: monospace; color: #64748b; }
</style>

<div class="uk-bc-action">
    <div class="uk-bc-bars"></div>
    <div class="uk-bc-num">987654321098</div>
    <button class="uk-bc-dl-btn"><i class="fas fa-download"></i> Save Image</button>
</div>

<style>
    .uk-bc-action {
        display: inline-flex; flex-direction: column; align-items: center;
        background: #fff; padding: 1.5rem; border: 1px solid #e2e8f0;
        border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    }
    .uk-bc-bars {
        width: 200px; height: 60px; margin-bottom: 0.5rem;
        background: repeating-linear-gradient(90deg, #0f172a, #0f172a 2px, transparent 2px, transparent 4px, #0f172a 4px, #0f172a 5px, transparent 5px, transparent 9px);
    }
    .uk-bc-num { font-family: monospace; font-size: 1rem; letter-spacing: 0.2em; color: #0f172a; margin-bottom: 1.25rem; }
    .uk-bc-dl-btn {
        background: #eef2f8; color: #1e3a8a; border: none;
        padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.8rem;
        font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.4rem;
    }
    .uk-bc-dl-btn:hover { background: #dbeafe; }
</style>

<div class="uk-bc-sticker">
    <div class="uk-bc-bars-tiny"></div>
    <div class="uk-bc-num-tiny">12345678</div>
</div>

<style>
    .uk-bc-sticker {
        display: inline-flex; flex-direction: column; align-items: center;
        background: #f8fafc; padding: 0.75rem 1rem; border: 1px solid #cbd5e1;
        border-radius: 0.25rem;
    }
    .uk-bc-bars-tiny {
        width: 120px; height: 30px; margin-bottom: 0.25rem;
        background: repeating-linear-gradient(90deg, #0f172a, #0f172a 1px, transparent 1px, transparent 2px, #0f172a 2px, #0f172a 3px, transparent 3px, transparent 5px);
    }
    .uk-bc-num-tiny { font-family: monospace; font-size: 0.7rem; letter-spacing: 0.1em; color: #64748b; }
</style>

<div class="uk-bc-card" style="border-color: #1e3a8a;">
    <div class="uk-bc-bars-blue"></div>
    <div class="uk-bc-num" style="color: #1e3a8a;">112233445566</div>
</div>

<style>
    .uk-bc-card {
        display: inline-flex; flex-direction: column; align-items: center;
        background: #fff; padding: 1rem 2rem; border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
    }
    .uk-bc-bars-blue {
        width: 200px; height: 60px; margin-bottom: 0.5rem;
        background: repeating-linear-gradient(90deg, #1e3a8a, #1e3a8a 2px, transparent 2px, transparent 4px, #1e3a8a 4px, #1e3a8a 5px, transparent 5px, transparent 9px);
    }
    .uk-bc-num { font-family: monospace; font-size: 1rem; letter-spacing: 0.2em; }
</style>