In atomic design, what is a template, and what would a claim-detail template in an insurance claims portal contain and leave out?
answer
- fourth of five levels
- page-level skeleton
- structure, not final content
- organisms placed into regions
- real claims arrive at the next level
basics
~10 sA template is a page-level skeleton that places organisms into a layout and shows the content structure, not the final content. A claim-detail template holds regions and placeholder shapes, never a real policyholder's claim.
solid answer
~40 sIn Brad Frost's atomic design, templates are *page-level objects that place components into a layout and articulate the design's underlying content structure*. A claim-detail template in an insurance portal would place the header, a claim-summary organism, a status timeline, a documents list, a message thread with the adjuster and a next-steps sidebar into regions, each filled with placeholder content that describes its shape: a claim title of a given length range, zero to many documents, damage photos at a known aspect ratio. It leaves out real claims — pouring representative content in is the page level. The template is where the team proves the parts add up to a working whole and where layout decisions — region order, sizing, what collapses when empty — live.
go deeper
Recall Frost's definition — page-level objects placing components into a layout and showing content structure — and that real content belongs to pages.
Explain what a template decides (regions, order, sizing, empty behaviour) and what it leaves to others: real content, business rules, organism internals.
Show how a template exposes layout problems early, such as a timeline crowding a documents region, and how its content ranges guide writers and engineers.
Discuss when a coded template layer is worth maintaining versus letting each screen compose its own layout, given how many screens share a skeleton.
## The definition Brad Frost's **atomic design** has five levels: **atoms** (basic elements), **molecules** (small single-purpose groups), **organisms** (distinct sections of an interface), **templates** and **pages**. Templates are where the chemistry vocabulary stops and page vocabulary begins. Frost defines them as *page-level objects that place components into a layout and articulate the design's underlying content structure*. Two halves of that sentence matter: - **Place components into a layout.** The template decides which organisms appear, in which regions, in which order and at what relative size. - **Articulate content structure.** The template shows what the content is *made of* — lengths, counts, image sizes — rather than what the content *is*. ## A claim-detail template, region by region In an insurance claims portal, the claim-detail screen is where a policyholder follows one claim. Its template might look like this: | Region | Organism placed there | What the placeholder describes | |---|---|---| | Top | site header | logo, navigation, account menu | | Main, first | claim summary | claim title of 10 to 80 characters, claim type, status, dates | | Main, second | status timeline | 1 to 30 events, each with a date and a short note | | Main, third | documents and photos | 0 to 20 files; photos in a fixed aspect ratio, portrait allowed | | Main, fourth | message thread | 0 to many messages of varying length | | Side | next steps | 1 to 4 actions with short labels | | Bottom | footer | legal links, contact options | None of that is real data. It is the **skeleton** every claim-detail screen will share. ## What the template leaves out 1. **Real content.** A particular claim, policy number or photo belongs to the page level, where representative content fills the template to see how it holds up. 2. **Business rules.** Which claims get a payment section or an appeal option is decided by the application that fills the template, not by the skeleton. 3. **Organism internals.** The template places the timeline; it does not decide how each timeline event is drawn. ## Why the level is worth having - **Proof that the parts fit.** Frost stresses demonstrating components together in a layout to prove they add up to a well-functioning whole. A timeline that looked fine alone may crowd the documents region. - **Guardrails for content.** Stating lengths and counts tells content writers and engineers what the design can hold. - **A shared review object.** Designers, engineers and content strategists can agree on structure before real content exists. - **Reuse.** Every claim-detail screen, whatever the claim, uses the same skeleton. ## Across platforms and tools A template is not a web-only artefact. In a design editor it is a frame of placed components with structured placeholder content; in a web app it is a layout component with named regions; in a native mobile app it is a screen scaffold whose regions are filled by feature code. The model — layout plus content structure, no real data — is the same in each. ## Common misreadings - **'A template is a finished screen.'** Finished screens with real content are pages. - **'A template has no content at all.'** It has placeholder content, deliberately shaped to show structure. - **'Templates are only for marketing pages.'** Application screens such as a claim-detail view benefit just as much. - **'The template decides who sees what.'** Access and business rules belong to the application layer that fills it.
- Why did Frost switch from chemistry names to 'template' and 'page' at this level?Because stakeholders understand pages and templates, while stretching the chemistry metaphor further confuses them. From this level on, the artefacts resemble what clients and managers will review and sign off, so the vocabulary matches the final output.
- Does a template need its own coded component, or is it only a design artefact?Teams do both. In design it is a frame used to review structure; in code, a layout component with named regions stops each screen reinventing the arrangement. Coding it pays off when several screens share the skeleton; a one-off screen may not need it.
saying these in an interview costs you the question
- A template is a finished screen showing a real customer's data.
- A template contains no content at all, not even placeholders.
- The template should decide which customers see which sections.
- Templates are only useful for marketing pages, not application screens.
- A template defines how each organism draws its own internals.