Asymmetric Type — Playground

{CF} CodeFronts Back to CSS Hero Sections Asymmetric Type Pure CSS

Edit any tab — preview updates live

.hs-asy {
  width: 100%;
  min-height: clamp(220px, 28vh, 100vh);
  padding: clamp(20px, 4vh, 80px) clamp(20px, 5vw, 60px);
  background: #0e0e16;
  display: flex; flex-direction: column; justify-content: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #f0eeff;
}
.hs-asy-grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  font-weight: 900;
  line-height: 0.9; letter-spacing: -0.04em;
}
.hs-asy-l { font-size: clamp(34px, 9vw, 110px); text-align: left; }
.hs-asy-r { font-size: clamp(34px, 9vw, 110px); text-align: right;
  background: linear-gradient(135deg, #ff6c8a, #ff9a76);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hs-asy-amp {
  font-size: clamp(48px, 12vw, 160px);
  font-style: italic; font-weight: 400;
  color: #a78bfa;
  font-family: Georgia, serif;
  line-height: 0.9;
}
.hs-asy-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: clamp(16px, 4vh, 40px); padding-top: clamp(10px, 2vh, 20px);
  border-top: 1px solid rgba(255,255,255,0.18);
  flex-wrap: wrap; gap: 8px;
}
.hs-asy-meta span {
  font-family: monospace; font-size: clamp(10px, 1.3vw, 12px);
  color: #b8b6d4; letter-spacing: 0.04em;
}
.hs-asy-cta {
  font-family: monospace; font-size: clamp(10px, 1.4vw, 12px);
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #f0eeff; text-decoration: none;
  padding: 7px 14px; border: 1px solid #f0eeff; border-radius: 0;
  transition: background 0.15s, color 0.15s;
}
.hs-asy-cta:hover { background: #f0eeff; color: #0e0e16; }

Live preview Ready