Buttondown is fairly opinionated about the best reading experience being friendly and minimal.
You can use HTML and CSS to fully customize the web design of your newsletter archives in Buttondown's design settings.
Buttondown comes with default templates: Classic and Modern.
You can view all available themes and their source code in the buttondown/themes repository.
| 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 |
|---|---|
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 |
|---|---|
card | Generic card container |
card--takeover | Full-width takeover card |
footer | Footer section |
attachment | Email attachment container |
attachment-link | Link to download attachment |
app-container | Main application container |