<div class="grid">
<label class="card">
<input name="plan" class="radio" type="radio" checked>
<span class="plan-details">
<span class="plan-type">Basic</span>
<span class="plan-cost">$0<span class="slash">/</span><abbr class="plan-cycle" title="month">mo</abbr></span>
<span>1 team member</span>
<span>100 GB/mo</span>
<span>1 concurrent build</span>
</span>
</label>
<label class="card">
<input name="plan" class="radio" type="radio">
<span class="hidden-visually">Pro - $50 per month, 5 team members, 500 GB per month, 5 concurrent builds</span>
<span class="plan-details" aria-hidden="true">
<span class="plan-type">Pro</span>
<span class="plan-cost">$50<span class="slash">/</span><span class="plan-cycle">mo</span></span>
<span>5 team members</span>
<span>500 GB/mo</span>
<span>5 concurrent builds</span>
</span>
</label>
<label class="card">
<input name="plan" class="radio" type="radio">
<span class="hidden-visually">Business - $200 per month, 5+ team members, 1000 GB per month, Unlimited builds</span>
<span class="plan-details" aria-hidden="true">
<span class="plan-type">Business</span>
<span class="plan-cost">$200<span class="slash">/</span><span class="plan-cycle">mo</span></span>
<span>5+ team members</span>
<span>1000 GB/mo</span>
<span>Unlimited builds</span>
</span>
</label>
</div>
:root {
--card-line-height: 1.2em;
--card-padding: 1em;
--card-radius: 0.5em;
--color-green: #558309;
--color-gray: #e2ebf6;
--color-dark-gray: #c4d1e1;
--radio-border-width: 2px;
--radio-size: 1.5em;
}
body {
background-color: #f2f8ff;
color: #263238;
font-family: 'Noto Sans', sans-serif;
margin: 0;
padding: 2em 6vw;
}
.grid {
display: grid;
grid-gap: var(--card-padding);
margin: 0 auto;
max-width: 60em;
padding: 0;
@media (min-width: 42em) {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: #fff;
border-radius: var(--card-radius);
position: relative;
&:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}
}
.radio {
font-size: inherit;
margin: 0;
position: absolute;
right: calc(var(--card-padding) + var(--radio-border-width));
top: calc(var(--card-padding) + var(--radio-border-width));
}
@supports(-webkit-appearance: none) or (-moz-appearance: none) {
.radio {
-webkit-appearance: none;
-moz-appearance: none;
background: #fff;
border: var(--radio-border-width) solid var(--color-gray);
border-radius: 50%;
cursor: pointer;
height: var(--radio-size);
outline: none;
transition:
background 0.2s ease-out,
border-color 0.2s ease-out;
width: var(--radio-size);
&::after {
border: var(--radio-border-width) solid #fff;
border-top: 0;
border-left: 0;
content: '';
display: block;
height: 0.75rem;
left: 25%;
position: absolute;
top: 50%;
transform:
rotate(45deg)
translate(-50%, -50%);
width: 0.375rem;
}
&:checked {
background: var(--color-green);
border-color: var(--color-green);
}
}
.card:hover .radio {
border-color: var(--color-dark-gray);
&:checked {
border-color: var(--color-green);
}
}
}
.plan-details {
border: var(--radio-border-width) solid var(--color-gray);
border-radius: var(--card-radius);
cursor: pointer;
display: flex;
flex-direction: column;
padding: var(--card-padding);
transition: border-color 0.2s ease-out;
}
.card:hover .plan-details {
border-color: var(--color-dark-gray);
}
.radio:checked ~ .plan-details {
border-color: var(--color-green);
}
.radio:focus ~ .plan-details {
box-shadow: 0 0 0 2px var(--color-dark-gray);
}
.radio:disabled ~ .plan-details {
color: var(--color-dark-gray);
cursor: default;
}
.radio:disabled ~ .plan-details .plan-type {
color: var(--color-dark-gray);
}
.card:hover .radio:disabled ~ .plan-details {
border-color: var(--color-gray);
box-shadow: none;
}
.card:hover .radio:disabled {
border-color: var(--color-gray);
}
.plan-type {
color: var(--color-green);
font-size: 1.5rem;
font-weight: bold;
line-height: 1em;
}
.plan-cost {
font-size: 2.5rem;
font-weight: bold;
padding: 0.5rem 0;
}
.slash {
font-weight: normal;
}
.plan-cycle {
font-size: 2rem;
font-variant: none;
border-bottom: none;
cursor: inherit;
text-decoration: none;
}
.hidden-visually {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.