Date

10.02.2022

Time

22:00

Row

16

<div class="ticket-wrapper">
    <div class="ticket-grid">
<!----------------------------------- ↓Ticket Data to Replace↓ ------->
        <div class="info-block full-block">
            <h1 class="info-block-value">Led Zeppelin</h1>
            <p class="info-block-label">Anniversary tour</p>
        </div>
        <div class="info-block full-block">
            <p class="info-block-label">Place</p>
            <h3 class="info-block-value">Benaroya Hall Seattle, US</h3>
        </div>
        <div class="info-block">
            <p class="info-block-label">Date</p>
            <h3 class="info-block-value">10.02.2022</h3>
        </div>
        <div class="info-block">
            <p class="info-block-label">Time</p>
            <h3 class="info-block-value">22:00</h3>
        </div>
        <div class="info-block">
            <p class="info-block-label">Row</p>
            <h3 class="info-block-value">16</h3>
        </div>
        <div class="info-block">
            <p class="info-block-label">Seat</p>
            <h3 class="info-block-value">7</h3>
        </div>
    </div>
    <div class="ticket-divider"></div>
    <div class="ticket-bottom">
        <div class="ticket-barcode-wrapper">
<!------------- ↓Your Barcode column goes here↓ ------->
            <img src="BARCODEDATATOREPLACE" alt="" />
        </div>
    </div>
</div>

<style>

/*====== ↓Stuff to Replace↓ ======*/

:root {
    --ticketAppBgColor: white; /* Change this if use dark theme */
    --ticketColor: TICKETCOLORTOREPLACE;
    --ticketTextColor: TICKETTEXTCOLORTOREPLACE;
    --ticketCoverImage: url(COVERIMAGEURLTOREPLACE);
}

/*==== ↓Component Styles ( !Don't touch if not sure! )↓ ====*/

.ticket-wrapper {
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    border-radius: 24px;
}

.info-block > * {
    margin: 0 !important;
}

.ticket-grid,
.ticket-bottom {
    width: 100%;
    padding: 32px;
}

.ticket-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    background-image:
        radial-gradient(circle at 100% 0%, #00000000 0%, var(--ticketColor) 50%, var(--ticketColor) 100%),
        var(--ticketCoverImage);
    background-position:
        center,
        top -6rem right -6rem; /* Play with numbers to adjust image position if necessary */
    background-size:
        cover,
        cover;
    background-repeat:
        no-repeat,
        no-repeat;
}

.full-block {
    grid-column: span 2;
}

.info-block-label,
.info-block-value {
    color: var(--ticketTextColor);
}

.info-block-label {
    opacity: .4;
}

.ticket-divider {
    width: 100%;
    height: 2px;
    background: transparent;
    border-bottom: 2px dashed var(--ticketColor);
    position: relative;
}

.ticket-divider::before,
.ticket-divider::after {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--ticketAppBgColor);
    border-radius: 50%;
    position: absolute;
}

.ticket-divider::before {
    top: -8px;
    left: -8px;
}

.ticket-divider::after {
    top: -8px;
    right: -8px;
}

.ticket-bottom {
    background-color: var(--ticketColor);
}

.ticket-barcode-wrapper {
    display: flex;
    width: 100%;
    height: 80px;
    padding: 0 4px;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
}

</style>

<aside> 📌 Use a Template column to paste the code and replace necessary parts. Use a Rich Text with this template column.

</aside>