DEV3 Technologies home

Print stylesheet for a resume page

A small React resume component with print CSS that sets A4 page margins, hides controls and avoids awkward page breaks.

React / Next.jsLayoutsprintcssresumereact

Live preview

Code

'use client';
import './resume-print.css';

type Job = { company: string; title: string; period: string; points: string[] };
type Props = { name: string; role: string; summary?: string; jobs: Job[] };

export function Resume({ name, role, summary, jobs }: Props) {
  return (
    <>
      <div className="no-print toolbar">
        <button type="button" onClick={() => window.print()}>
          Print or save as PDF
        </button>
      </div>
      <article className="resume">
        <header>
          <h1>{name}</h1>
          <p className="role">{role}</p>
        </header>
        {summary && <p>{summary}</p>}
        <h2>Experience</h2>
        {jobs.map((job) => (
          <section key={job.company + job.period} className="job">
            <h3>
              {job.title}, {job.company} <span>{job.period}</span>
            </h3>
            <ul>
              {job.points.map((p) => (
                <li key={p}>{p}</li>
              ))}
            </ul>
          </section>
        ))}
      </article>
    </>
  );
}

How it works

What it solves

Letting visitors print or save their resume as a PDF is a cheap alternative to server-side PDF generation, but the browser default output is poor: toolbars appear, backgrounds vanish, headings strand at the bottom of a page and margins are inconsistent. A focused print stylesheet fixes all of that.

How it works

The component renders an article with sections and a screen-only toolbar holding a print button that calls window.print(). The stylesheet has two layers. On screen, the article is a centred white sheet with a width approximating A4, so the editing view resembles the output.

Inside @media print, @page sets A4 size and 16 mm margins, so margins are controlled by CSS instead of the browser dialog. Everything marked .no-print is hidden and the page background is made plain white. print-color-adjust: exact keeps accent colours and the thin header rule, which browsers otherwise strip to save ink.

Break rules prevent ugly splits: break-inside: avoid on each job entry keeps it in one piece, and break-after: avoid on headings stops a heading sitting alone at the end of a page. Links print with their address using an a::after rule, which is useful on paper.

Adapting it

  • Use @page :first for a different first-page margin.
  • Set the paper size to letter for US users.
  • Add a page counter with the CSS counter(page) where supported.

Pitfalls

  • Browsers ignore custom page sizes inconsistently; test Chrome and Safari.
  • Remember users must enable background graphics in some dialogs unless print-color-adjust is honoured.

How to use it

  1. Save Resume.tsx and resume-print.css in components/.
  2. Import the stylesheet from the component (already done); Next.js bundles it.
  3. Pass your data: <Resume name="Ada Example" role="Engineer" jobs={[...]} />.
  4. Click the print button and choose "Save as PDF" in the dialog.

Licence: DEV3 Snippet Licence. Free to use, change and ship in personal and commercial projects. Attribution is appreciated, not required. Please do not redistribute snippets as a collection.

Related snippets

Tailwind CSS · LayoutsRoadmap status columnsA public product roadmap laid out as Planned, In progress and Shipped columns that stack on phones, using semantic sections and lists.roadmapcolumnsgrid Tailwind CSS · LayoutsLink-in-bio profile layoutA single-column mobile-first link page with avatar, bio, social icon row and a stack of large tappable link buttons.link-in-bioprofilemobile Tailwind CSS · LayoutsIcon feature gridA responsive grid of feature cards, each with an inline SVG icon tile, a heading and a short description.featuresgridicons Flutter · LayoutsMulti-service home gridResponsive grid of service tiles with icons, optional badges and a data-driven list that adapts column count to width.fluttergridhome