CodePen Embed - Electronic Boarding pass

<input type="radio" name="theme" class="a-theme__check" id="theme1" checked>
<input type="radio" name="theme" class="a-theme__check" id="theme2">
<input type="radio" name="theme" class="a-theme__check" id="theme3">
<div class="m-theme">
	<label for="theme1" class="a-theme__selector -theme1"></label>
	<label for="theme2" class="a-theme__selector -theme2"></label>
	<label for="theme3" class="a-theme__selector -theme3"></label>
</div>

<div class="m-device">
	<div class="m-ticket">
		<div class="m-ticket__header">
			<div class="a-ticket__headerItem">BWI</div>
			<div class="a-ticket__headerItem">SAN</div>
		</div>
		<div class="m-ticket__details">
			<div class="a-ticket__person">
				MR. JOHN SMITH
			</div>
			<div class="a-ticket__title">
				Boarding Pass
			</div>
			<div class="m-ticket__detailsRow">
				<dl class="m-ticket__detail">
					<dt class="a-ticket__detailTitle -hidden">Origin</dt>
					<dd class="a-ticket__detailValue">Baltimore</dd>
				</dl>
				<dl class="m-ticket__detail">
					<dt class="a-ticket__detailTitle -hidden">Destination</dt>
					<dd class="a-ticket__detailValue">San Diego</dd>
				</dl>
			</div>
			<div class="m-ticket__detailsRow">
				<dl class="m-ticket__detail">
					<dt class="a-ticket__detailTitle">Flight</dt>
					<dd class="a-ticket__detailValue">2005</dd>
				</dl>
				<dl class="m-ticket__detail">
					<dt class="a-ticket__detailTitle">Seat</dt>
					<dd class="a-ticket__detailValue">11e</dd>
				</dl>
			</div>
			<div class="m-ticket__detailsRow">
				<dl class="m-ticket__detail">
					<dt class="a-ticket__detailTitle">Date</dt>
					<dd class="a-ticket__detailValue">15AUG21</dd>
				</dl>
				<dl class="m-ticket__detail">
					<dt class="a-ticket__detailTitle">TIME</dt>
					<dd class="a-ticket__detailValue">10:25AM</dd>
				</dl>
			</div>
			<div class="m-ticket__detailsRow">
				<dl class="m-ticket__detail">
					<dt class="a-ticket__detailTitle -strong">Terminal</dt>
					<dd class="a-ticket__detailValue">1</dd>
				</dl>
				<dl class="m-ticket__detail">
					<dt class="a-ticket__detailTitle -strong">Gate</dt>
					<dd class="a-ticket__detailValue">B3</dd>
				</dl>
			</div>
		</div>
		<div class="m-ticket__codebar">
			<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 92 25">
				<line fill="none" style="stroke-width:1;" x1="0.5" y1="0" x2="0.5" y2="30" />
				<line fill="none" style="stroke-width:2;" x1="3" y1="0" x2="3" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="6.5" y1="0" x2="6.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="9.5" y1="0" x2="9.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="11.5" y1="0" x2="11.5" y2="30" />
				<line fill="none" style="stroke-width:2;" x1="14" y1="0" x2="14" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="16.5" y1="0" x2="16.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="19.5" y1="0" x2="19.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="21.5" y1="0" x2="21.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="23.5" y1="0" x2="23.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="26.5" y1="0" x2="26.5" y2="30" />
				<line fill="none" style="stroke-width:2;" x1="29" y1="0" x2="29" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="31.5" y1="0" x2="31.5" y2="30" />
				<line fill="none" style="stroke-width:2;" x1="35" y1="0" x2="35" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="37.5" y1="0" x2="37.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="39.5" y1="0" x2="39.5" y2="30" />
				<line fill="none" style="stroke-width:2;" x1="42" y1="0" x2="42" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="44.5" y1="0" x2="44.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="47.5" y1="0" x2="47.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="49.5" y1="0" x2="49.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="51.5" y1="0" x2="51.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="54.5" y1="0" x2="54.5" y2="30" />
				<line fill="none" style="stroke-width:2;" x1="57" y1="0" x2="57" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="59.5" y1="0" x2="59.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="61.5" y1="0" x2="61.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="64.5" y1="0" x2="64.5" y2="30" />
				<line fill="none" style="stroke-width:2;" x1="67" y1="0" x2="67" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="69.5" y1="0" x2="69.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="71.5" y1="0" x2="71.5" y2="30" />
				<line fill="none" style="stroke-width:2;" x1="75" y1="0" x2="75" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="77.5" y1="0" x2="77.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="79.5" y1="0" x2="79.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="81.5" y1="0" x2="81.5" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="83.5" y1="0" x2="83.5" y2="30" />
				<line fill="none" style="stroke-width:2;" x1="87" y1="0" x2="87" y2="30" />
				<line fill="none" style="stroke-width:1;" x1="90.5" y1="0" x2="90.5" y2="30" />
			</svg>
		</div>
	</div>
</div>
<div class="a-reference">Base on <a href="https://dribbble.com/shots/9146965-Boarding-Pass-Design" target="_blank">this Dribbble shot</a> from Charles Postiaux.</div>

@import url("https://fonts.googleapis.com/css2?family=Hind:wght@400;500;700&display=swap");

@theme1: {
	@mainColor: #212325;
	@backgoundColor: #fff;
	@accent: #f73033;
	@barcode: #212325;
};
@theme2: {
	@mainColor: #fff;
	@backgoundColor: #212325;
	@accent: #f73033;
	@barcode: #fff;
};
@theme3: {
	@mainColor: #fff;
	@backgoundColor: #ffb23a;
	@accent: #212325;
	@barcode: #212325;
};
.transition(@prop) {
	transition: @prop 0.44s ease-in-out;
}
.theme(@themeName, @theme) {
	#@{themeName}:checked ~ & {
		background-color: @theme[ @backgoundColor];

		.m-ticket {
			color: @theme[ @mainColor];
			&__codebar {
				line {
					stroke: @theme[ @barcode];
				}
			}
		}
		.a-ticket {
			&__title {
				color: @theme[ @accent];
			}
		}
	}
}

html {
	font-size: 1.8vmin;
	font-family: "Hind", sans-serif;
}
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #e3e9ef;
}

.m-device {
	position: relative;
	width: 35vmin;
	height: 2.1 * $width;
	border-radius: 6vmin;
	overflow: hidden;
	box-shadow: 0 0 10vmin #000000aa, 0 0 20vmin #00000055, 0 2vmin 2vmin #00000088;
	.transition(background-color);

	&:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		box-shadow: inset 0 0 0 1.4vmin #000;
		pointer-events: none;
		border-radius: inherit;
	}
}

.m-device {
	.theme(theme1, @theme1);
	.theme(theme2, @theme2);
	.theme(theme3, @theme3);
}

.m-ticket {
	& {
		min-height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		.transition(color);
	}
	&__header {
		padding: 1rem 0 0;
		margin-bottom: -2.9rem;
	}
	&__details {
		padding: 0 2rem 0;

		&Row {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			& + & {
				margin-top: 1rem;
			}
		}
	}
	&__detail {
		display: flex;

		& + & {
			margin-left: auto;
		}
	}
	&__codebar {
		margin: auto 2rem 2rem;

		position: sticky;
		bottom: 0;

		line {
			.transition(stroke);
		}
	}
}

.a-ticket {
	&__headerItem {
		font-weight: 700;
		font-size: 12rem;
		margin-left: -0.06em;
		text-transform: uppercase;
		line-height: 1em;
		letter-spacing: -0.06em;

		& + & {
			margin-top: -0.2em;
		}
	}

	&__person {
		font-size: 1.5rem;
		margin: 1em 0;
	}

	&__title {
		color: #f73033;
		font-weight: 500;
		border-bottom: 2px solid currentcolor;
		padding-bottom: 2px;
		margin: 1em 0;
		.transition(color);
	}
	&__detail {
		&Title {
			&.-hidden {
				display: none;
			}
			margin-right: 0.5ch;
		}
		&Value,
		&Title.-strong {
			font-weight: 700;
		}
		&Title,
		&Value {
			text-transform: uppercase;
		}
	}
}
.m-theme {
	margin: 2rem 0;
	position: absolute;
	bottom: 0;
}
.a-theme {
	&__check {
		display: none;
	}
	&__selector {
		.selected() {
			box-shadow: 0 0 6px 0px #0561b3;
		}
		display: inline-block;
		width: 10px;
		height: $width;
		border-radius: 50%;
		border-width: 8px;
		border-style: solid;
		cursor: pointer;

		&.-theme1 {
			border-color: @theme1[ @backgoundColor];
			background-color: @theme1[ @mainColor];
			#theme1:checked ~ .m-theme & {
				.selected();
			}
		}
		&.-theme2 {
			border-color: @theme2[ @backgoundColor];
			background-color: @theme2[ @mainColor];
			#theme2:checked ~ .m-theme & {
				.selected();
			}
		}
		&.-theme3 {
			border-color: @theme3[ @backgoundColor];
			background-color: @theme3[ @mainColor];
			#theme3:checked ~ .m-theme & {
				.selected();
			}
		}
	}
}
.a-reference {
	position: absolute;
	bottom: 0;
	right: 14px;
	font-size: 14px;
}

View Compiled

This Pen is owned by Daniel Fontes on CodePen.

See more by @dffontes on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.