12 CSS Code Blocks 04 / 12

Code Container with Line Numbers and Filename Header

A GitHub-dark inspired code container with editor-style filename tabs (<code>index.html</code> / <code>styles.css</code>) and a grid gutter that draws its line numbers from <code>counter-increment</code> in CSS — the numbers never get copied with the code, because they exist only as generated content in the gutter pseudo-element. Best for tutorial walk-throughs, multi-file documentation, before/after refactors, and any post where you reference specific line numbers in prose.

Best fortutorial walk-throughs, multi-file documentation, before/after refactors, and any post where you reference specific line numbers in prose.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="ccb-lnh" aria-label="Line numbers and filename header demo">
  <div class="ccb-lnh__file">
    <div class="ccb-lnh__tabs">
      <div class="ccb-lnh__tab"><span class="ccb-lnh__ico ccb-lnh__ico--html" aria-hidden="true"></span>index.html</div>
      <div class="ccb-lnh__tab ccb-lnh__tab--active"><span class="ccb-lnh__ico ccb-lnh__ico--css" aria-hidden="true"></span>styles.css</div>
    </div>
    <div class="ccb-lnh__codegrid ccb-lnh__pad">
      <div class="ccb-lnh__row"><code><span class="ccb-lnh__c">/* card layout tokens */</span></code></div>
      <div class="ccb-lnh__row"><code><span class="ccb-lnh__p">.card</span> {</code></div>
      <div class="ccb-lnh__row"><code>  <span class="ccb-lnh__k">display</span>: <span class="ccb-lnh__f">grid</span>;</code></div>
      <div class="ccb-lnh__row"><code>  <span class="ccb-lnh__k">gap</span>: <span class="ccb-lnh__s">1.25rem</span>;</code></div>
      <div class="ccb-lnh__row"><code>  <span class="ccb-lnh__k">padding</span>: <span class="ccb-lnh__s">clamp(1rem, 3vw, 2rem)</span>;</code></div>
      <div class="ccb-lnh__row"><code>  <span class="ccb-lnh__k">border-radius</span>: <span class="ccb-lnh__s">16px</span>;</code></div>
      <div class="ccb-lnh__row"><code>}</code></div>
    </div>
  </div>
</section>
/* ─── 04 Code Container with Line Numbers and Filename Header ──────── */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600&family=DM+Sans:wght@400;500;700&display=swap');

.ccb-lnh {
  --ccb-lnh-bg: #0d1117;
  --ccb-lnh-panel: #0f141d;
  --ccb-lnh-header: #161b25;
  --ccb-lnh-ink: #d7dee9;
  --ccb-lnh-muted: #8a93a2;
  --ccb-lnh-accent: #f78166;
  --ccb-lnh-gutter: #1a212d;
  --ccb-lnh-gutter-ink: #4b5566;

  width: 100%;
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(700px 380px at 0% 0%, rgba(247,129,102,.08), transparent 55%),
    var(--ccb-lnh-bg);
  color: var(--ccb-lnh-ink);
  font-family: 'DM Sans', sans-serif;
  padding: 36px 22px;
  box-sizing: border-box;
}
.ccb-lnh *, .ccb-lnh *::before, .ccb-lnh *::after { box-sizing: border-box; }

.ccb-lnh__file {
  width: 100%; max-width: 620px;
  background: var(--ccb-lnh-panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -32px rgba(0,0,0,.85);
}
.ccb-lnh__tabs {
  display: flex; align-items: center; gap: 2px;
  background: var(--ccb-lnh-header); padding: 10px 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ccb-lnh__tab {
  font-family: 'Source Code Pro', monospace;
  font-size: 12.5px;
  padding: 9px 16px; border-radius: 8px 8px 0 0;
  color: var(--ccb-lnh-muted);
  display: flex; align-items: center; gap: 8px;
}
.ccb-lnh__tab--active {
  background: var(--ccb-lnh-panel);
  color: var(--ccb-lnh-ink);
  border-top: 2px solid var(--ccb-lnh-accent);
}
.ccb-lnh__ico { width: 10px; height: 10px; border-radius: 2px; }
.ccb-lnh__ico--html { background: #e34c26; }
.ccb-lnh__ico--css  { background: #2965f1; }

.ccb-lnh__codegrid {
  counter-reset: ccblnh-line;
  font-family: 'Source Code Pro', monospace;
  font-size: 13.5px; line-height: 1.9;
  overflow-x: auto;
}
.ccb-lnh__row { display: grid; grid-template-columns: 3.4em 1fr; }
.ccb-lnh__row::before {
  counter-increment: ccblnh-line; content: counter(ccblnh-line);
  color: var(--ccb-lnh-gutter-ink); background: var(--ccb-lnh-gutter);
  text-align: right; padding: 0 14px 0 0;
  user-select: none;
  border-right: 1px solid rgba(255,255,255,.04);
}
.ccb-lnh__row code { padding: 0 18px; white-space: pre; overflow-x: auto; color: #cdd6e2; }
.ccb-lnh__pad { padding: 14px 0 18px; }

.ccb-lnh__k { color: #ff7b72; }
.ccb-lnh__f { color: #d2a8ff; }
.ccb-lnh__s { color: #a5d6ff; }
.ccb-lnh__p { color: #79c0ff; }
.ccb-lnh__c { color: #6e7681; font-style: italic; }

More from 12 CSS Code Blocks

Code Block with Copy to Clipboard ButtonMinimalist Dark Mode Code BoxMac-Style Window ContainerHorizontal Scroll & Word-Wrap Handling (Mobile Responsive)Glow-Effect & Neon Tech Code BlockGlassmorphism Code TerminalInline Code Snippet Pill StylingNeumorphic Embedded Code BoxSplit-Pane Code + Live Preview ContainerMinimalist Light Mode / Editorial ThemeExpandable / Collapsible Code Wrapper
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →