Responsive invoice summary
A clear, responsive invoice summary with aligned amounts, status text, and mobile-friendly payment actions.
Open folder
A clear, responsive invoice summary with aligned amounts, status text, and mobile-friendly payment actions.
Create a beginner-friendly responsive invoice summary using semantic section, heading, description list (dl/dt/dd), status text, and real buttons. Keep every custom selector under .cf-invoice and ensure every selector is represented in the supplied HTML so live CSS edits visibly update the preview. Use readable contrast, clear money alignment, status text beyond color, 44px touch targets, visible keyboard focus, responsive stacking from 320px, and reduced-motion handling. Do not use JavaScript, external assets, framework classes, or fake tables. Return complete copy-ready HTML and dependency-free CSS, then explain why a description list is appropriate for labelled invoice values.