Customize HTML rendering

The fragment comes with its own stylesheet, linked at the top of the fragment. It provides a clean, accessible layout.

By default, Goodays adapts this stylesheet to your website. If you want to make other changes on your own, without going through Goodays, you can also override the fragment's CSS variables:

Brand stylesheet

By default, Goodays sets up a stylesheet tailored to your brand guidelines. It is applied to every fragment of your account, with no change on your side. Your Goodays project contact handles it with you.

Override CSS variables

Optional: use CSS variables to make other changes on your own, without going through Goodays.

All the fragment's design tokens are CSS custom properties, prefixed with --goodays-. The fragment stylesheet declares them with zero specificity (:where(.goodays-widget)), so a simple rule in your own stylesheet wins, with no !important and whatever the loading order:

.goodays-widget {
  --goodays-font-family: "Inter", sans-serif;
  --goodays-color-text: #14211f;
  --goodays-color-muted: #5b6b68;
  --goodays-color-accent: #e8912d;   /* fill of stars and rating bars */
  --goodays-color-border: #dfe6e4;
  --goodays-gap-md: 20px;            /* scales every spacing */
}

Available variables

Class reference

Use these classes to target specific elements, for example to adjust a margin or a border. HTML IDs have an automatically generated suffix that can change when the fragment is regenerated: target classes or CSS variables instead of hard-coding IDs. The visible heading is "Customer reviews", translated into the place's language; the place name is included in the JSON-LD, not repeated in the widget heading.

section.goodays-widget                      root, also a CSS container
├── header.goodays-summary
│   ├── h2.goodays-title                    "Customer reviews"
│   ├── div.goodays-summary-body
│   │   ├── div.goodays-score
│   │   │   ├── div.goodays-score-line      .goodays-score-value + .goodays-score-max
│   │   │   ├── div.goodays-stars.goodays-stars-lg
│   │   │   └── p.goodays-review-count
│   │   └── div.goodays-distribution
│   │       └── div.goodays-distribution-row × 5
│   │           ├── span.goodays-distribution-label   with span.goodays-star
│   │           ├── meter.goodays-distribution-bar
│   │           └── span.goodays-distribution-count
│   └── p.goodays-empty-state               instead of the summary body, when there is no review yet
├── hr.goodays-divider
├── section.goodays-reviews
│   ├── div.goodays-section-heading         h3.goodays-section-title + span.goodays-section-count
│   ├── ol.goodays-review-list
│   │   └── li.goodays-review-item
│   │       └── article.goodays-review
│   │           ├── div.goodays-review-topline   div.goodays-stars + time.goodays-review-date
│   │           ├── p.goodays-review-comment
│   │           └── p.goodays-review-author
│   └── button.goodays-reviews-toggle       "See more reviews", when there are more than 5 reviews
└── footer.goodays-widget-footer            span.goodays-certified + svg.goodays-logo

/* Example: card layout for each review */
.goodays-widget .goodays-review {
  padding: 16px;
  border: 1px solid var(--goodays-color-border);
  border-radius: 12px;
}

Responsive behavior. The fragment adapts to the width of its container, not the viewport: below 580px, the score and the distribution stack vertically. Place it in a column of any width.

Accessibility. The fragment uses semantic markup, ARIA labels and visually hidden texts, and supports forced-colors mode. Keep sufficient contrast when you change colors: 4.5:1 for texts against your page background, and 3:1 for star outlines against your page background and between filled and empty stars. If your page background is not white, set --goodays-color-page-background to match it.

What not to change

If you remove the stylesheet <link> from the fragment, you are responsible for all its styling. Prefer overriding CSS variables: your customizations keep working when the layout is improved.