UI Components Easy
Divider Label
Horizontal divider line with centered or left-aligned text label — used for section separators like "or continue with".
Open in Lab
MCP
css
Targets: HTML
Code
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Inter, system-ui, sans-serif;
background: #050910;
color: #f2f6ff;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.demo {
width: 100%;
max-width: 480px;
}
.demo-title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.375rem;
}
.demo-sub {
color: #475569;
font-size: 0.875rem;
margin-bottom: 2rem;
}
.section {
margin-bottom: 1.75rem;
}
.section-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #475569;
margin-bottom: 0.75rem;
}
/* ── Divider base ── */
.divider {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
}
.divider::before,
.divider::after {
content: "";
flex: 1;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* ── Left-aligned: only trailing line ── */
.divider--left::before {
display: none;
}
.divider--left::after {
flex: 1;
}
/* ── Label ── */
.divider__label {
flex-shrink: 0;
font-size: 0.75rem;
font-weight: 500;
color: #475569;
white-space: nowrap;
}
.divider__label--icon {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: #64748b;
}
/* ── Gradient fade variant (no label) ── */
.divider--gradient::before {
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12));
border-top: none;
height: 1px;
}
.divider--gradient::after {
background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.12));
border-top: none;
height: 1px;
}
/* ── Context card ── */
.form-card {
display: flex;
flex-direction: column;
gap: 0.875rem;
background: #0a1120;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 1.5rem;
}
.btn-primary {
width: 100%;
padding: 0.65rem 1rem;
border-radius: 8px;
border: none;
background: #3b82f6;
color: #fff;
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.btn-primary:hover {
background: #2563eb;
}
.btn-social {
width: 100%;
padding: 0.65rem 1rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: transparent;
color: #cbd5e1;
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: background 0.15s, border-color 0.15s;
}
.btn-social:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Divider Label</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="demo">
<h1 class="demo-title">Divider Label</h1>
<p class="demo-sub">Horizontal dividers with centered or aligned text labels.</p>
<section class="section">
<p class="section-label">Centered text</p>
<div class="divider" role="separator" aria-label="or">
<span class="divider__label">OR</span>
</div>
</section>
<section class="section">
<p class="section-label">Centered — "Continue with"</p>
<div class="divider" role="separator" aria-label="or continue with">
<span class="divider__label">or continue with</span>
</div>
</section>
<section class="section">
<p class="section-label">Left-aligned text</p>
<div class="divider divider--left" role="separator" aria-label="This week">
<span class="divider__label">This week</span>
</div>
</section>
<section class="section">
<p class="section-label">With icon</p>
<div class="divider" role="separator" aria-label="section with star icon">
<span class="divider__label divider__label--icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
Featured
</span>
</div>
</section>
<section class="section">
<p class="section-label">Gradient fade</p>
<div class="divider divider--gradient" role="separator" aria-label="more options"></div>
</section>
<section class="section">
<p class="section-label">In context — login form</p>
<div class="form-card">
<button class="btn-primary" type="button">Sign in with email</button>
<div class="divider" role="separator" aria-label="or">
<span class="divider__label">or</span>
</div>
<button class="btn-social" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
</svg>
Continue with Google
</button>
</div>
</section>
</div>
</body>
</html>Divider Label
Section separators with optional text or icon labels.
Variants
- Centered text — classic “OR” / “continue with” separator
- Left-aligned text — section heading with trailing line
- With icon — emoji or SVG icon between the lines
- Gradient fade — lines fade to transparent at the edges for a soft look
Usage
Use role="separator" on the wrapper element. The line effect is achieved with CSS ::before and ::after pseudo-elements using flex: 1 and a border-top, avoiding extra markup.