Import File Summary - Everyday Interface Patterns

A static import summary shows customers.csv, 42 rows, columns Name, Email, Plan, and Ready to preview.

Program

Import review starts with a small summary so people can check the selected file shape before any upload, parsing, or import work.

import_file_summary.html

Visuals: captured from real browser rendering

<section class="import-summary" aria-labelledby="import-summary-title">
  <h2 id="import-summary-title">Import file summary</h2>
  <dl>
    <div><dt>File</dt><dd>customers.csv</dd></div>
    <div><dt>Rows</dt><dd>42</dd></div>
    <div><dt>Columns</dt><dd>Name, Email, Plan</dd></div>
    <div><dt>Status</dt><dd><span class="badge">Ready to preview</span></dd></div>
  </dl>
  <button type="button">Preview import</button>
  <p class="note">Static import review only; the button does not route, save, send, upload, import, parse, or call a data service.</p>
</section>
<style>
  .import-summary { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .import-summary dl { display: grid; gap: 8px; margin: 0; }
  .import-summary dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 8px; }
  .import-summary dt { color: #475569; }
  .import-summary dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dcfce7; padding: 2px 8px; }
  .import-summary button { justify-self: start; padding: 8px 12px; }
  .note { color: #475569; }
</style>

Label the import summary.
The section is labelled by its visible heading.
Show the file row.
The file name is exact pinned data.
Show the row count.
The row count is exact pinned data.
Show the column readback.
The column names are exact pinned data.
Show the preview status.
The status is visible as a static badge.
Check import summary honesty.
File, rows, columns, status, and no live data service.

labelled summary The section heading names the import file summary surface.

file shape The file name, row count, and columns are exact pinned review data.

no parser The lesson should not imply upload, parsing, import APIs, database APIs, or file processing.