Buttondown is fairly opinionated about the best reading experience being friendly and minimal.
You can customize the design and functionality of your newsletter archives in Buttondown's archive settings.
Display a customizable message at the top of your archive pages. You can configure:
Enable dark mode support so your archives automatically match your reader's system preference for light or dark mode.
Customize the header and footer sections of your archive pages using Buttondown's rich text editor. You can add text, links, subscribe buttons, subscribe forms, and other elements.
Add custom links to your archive's navigation bar. This is useful for linking to external pages like your main website, social media profiles, or other resources.
Allow subscribers to search through your archive to find specific content.
Track page views on your archive to understand how readers engage with your content.
Buttondown comes with several built-in themes you can choose from:
An Instagram-inspired grid theme that displays posts in a three-column layout, perfect for image-heavy newsletters. Named after photographer Diane Arbus.
A brutalist, nearly no-CSS theme that embraces browser defaults for maximum speed and simplicity. Renders in monospace with minimal styling. Named after Ada Lovelace.
You can view all available themes and their source code in the buttondown/themes repository.
You can use custom CSS to fully customize the styling of your newsletter archives.
| Class | Description |
|---|---|
subject | The subject line of the email |
description | The description/subtitle of the email |
email-body | The main content area of the email |
email-detail__header | Container for email header information |
email-detail-date | The publish date of the email |
newsletter | Container for newsletter information |
newsletter-icon | The newsletter icon/image |
newsletter-name | The newsletter name |
| Class | Description |
|---|---|
announcement-bar | The announcement bar container |
| Class | Description |
|---|---|
header-navigation | Main navigation container |
header-navigation-link | Individual navigation links |
header-navigation-link--subscribe | Subscribe link in navigation |
header-brand | Newsletter brand/logo link |
header-brand-name | Newsletter name in header |
| Class | Description |
|---|---|
archive__button | Standard button |
archive__button--upgrade | Upgrade button variant |
archive__button--subscribe | Subscribe button variant |
| Class | Description |
|---|---|
archive__social-share-link | Individual social share link |
archive__social-share-link-container | Container for social share links |
| Class | Description |
|---|---|
related-emails-widget | Container for related emails widget |
related-emails-header | Header section of related emails |
related-emails-title | Title of related emails section |
related-email | Individual related email item |
related-email-link | Link to related email |
related-email-title | Title of related email |
related-email-date | Date of related email |
related-email-description | Description of related email |
related-email-image | Image for related email |
| Class | Description |
|---|---|
comment | Individual comment |
comment--author | Comment from the newsletter author |
comment__header | Comment header section |
comment__author | Comment author information |
comment__avatar | Comment author avatar |
comment-input | Comment input form |
comment-input__fields | Form fields container |
comment-input__input | Input field in comment form |
comment-input__textarea | Textarea in comment form |
comment-input__actions | Action buttons container |
comment-input__back-link | Back link from comment detail page |
| Class | Description |
|---|---|
archive__payment-form | Payment form container |
archive__email-input-container | Container for email input fields |
archive__email-label | Label for email input |
archive__email-input | Email input field |
archive__gift-toggle | Gift subscription toggle |
archive__gift-checkbox | Gift subscription checkbox |
| Class | Description |
|---|---|
archive__modal-overlay | Modal overlay/backdrop |
archive__modal-container | Modal container |
archive__modal-header | Modal header section |
archive__modal-title | Modal title |
archive__modal-close | Close button for modal |
archive__modal-content | Modal content area |
archive__modal-actions | Modal action buttons container |
archive__success-button | Success modal button |
archive__success-button--primary | Primary success button |
archive__success-button--secondary | Secondary success button |
archive__success-icon | Success icon |
archive__success-message | Success message text |
| Class | Description |
|---|---|
app-container | Main application container |
attachment | Email attachment container |
attachment-link | Link to download attachment |
card | Generic card container |
card--takeover | Full-width takeover card |
footer | Footer section |