Event Card - Nerdworks HQ

Friday Night

Friday Night Magic

Modern format tournament. Join our veterans and new players alike for an evening of competitive play.

primary #266038 dark

Friday Night

Friday Night Magic

Modern format tournament. Join our veterans and new players alike for an evening of competitive play.

secondary #217E52 dark

Friday Night

Friday Night Magic

Modern format tournament. Join our veterans and new players alike for an evening of competitive play.

tertiary #1A1E1A dark

Friday Night

Friday Night Magic

Modern format tournament. Join our veterans and new players alike for an evening of competitive play.

dark #0A0A0A dark

Friday Night

Friday Night Magic

Modern format tournament. Join our veterans and new players alike for an evening of competitive play.

light #FFFFFF light

Friday Night

Friday Night Magic

Modern format tournament. Join our veterans and new players alike for an evening of competitive play.

accent #217E52 dark

<div class="event-card">
				<span class="eyebrow event-card__day">Friday Night</span>
				<h3 class="event-card__name">Friday Night Magic</h3>
				<p class="event-card__desc">Modern format tournament. Join our veterans and new players alike for an evening of competitive play.</p>
				<div class="event-card__footer">
					<span class="event-card__time">19:00 GMT</span>
					<span class="event-card__status">RSVP REQUIRED</span>
				</div>
			</div>

.event-card {
background-color: var(--bg-surface-light);
			border: var(--border-hairline) solid var(--light-grey);
			padding: 40px;
			border-radius: var(--radius-lg);
			display: flex;
			flex-direction: column;
			gap: var(--space-5);
			transition: box-shadow 0.3s ease;
}

.event-card:hover {
box-shadow: var(--shadow-xl);
}

.event-card__day {
color: var(--text-on-light-muted);
}

.event-card__name {
font-size: var(--fs-h3);
			font-weight: var(--fw-bold);
			color: var(--text-on-light);
			line-height: var(--lh-heading);
}

.event-card__desc {
color: var(--text-on-light-muted);
			line-height: var(--lh-body);
}

.event-card__footer {
margin-top: auto;
			padding-top: var(--space-5);
			border-top: var(--border-hairline) solid var(--light-grey);
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: var(--text-on-light);
}

.event-card__time {
font-weight: var(--fw-bold);
}

.event-card__status {
font-weight: var(--fw-medium);
			color: var(--nw-green-light);
}

Origin

Prototype TTF2 — NW Homepage Showcase Dark (TN15 — MN19 Converted, 1440px Container)

Styleguide STF2 — Nerdworks \u2014 The Showcase Dark

Tokens Used

--bg-surface-light
--border-hairline
--fs-h3
--fw-bold
--fw-medium
--lh-body
--lh-heading
--light-grey
--nw-green-light
--radius-lg
--shadow-xl
--space-5
--text-on-light
--text-on-light-muted