Skip to content

Improve CMS content styling in starter templates #2561

Description

Context

During validation of PR #2543, the CMS hero/content styling can render with missing or too-weak styles in the starter/extended templates. The local screenshots compare two states of the same CMS content:

  • Broken/unstyled-looking state: hero text is tiny, CTA button is barely styled, and CMS content does not look like the intended storefront presentation.
  • Expected/reference state: hero heading, subheading, and CTA have proper visual hierarchy and spacing.

This became visible while simplifying the starter UnoCSS config and removing broad global h1/h2/h3 preflights from templates/vue-starter-template/uno.config.ts. Those global element styles were not a good starter default, but their removal makes it clearer that CMS-rendered content needs proper scoped/default styling of its own.

Problem

CMS content should not rely on broad starter-template global heading styles to look correct. The CMS layer/template should provide the expected typography, CTA, spacing, and responsive hero treatment where CMS elements/blocks need it.

Suggested follow-up

  • Audit CMS-rendered blocks/elements used by the starter and extended templates, especially hero/text-on-image content.
  • Identify which styles are missing after removing starter-level h1/h2/h3 preflights.
  • Add styling in the appropriate CMS component/layer or narrowly scoped template surface instead of reintroducing broad global heading styles.
  • Validate both vue-starter-template and vue-starter-template-extended visually.

Validation notes

Check the home page CMS hero in both templates. The expected result should preserve brand-specific overrides like Lumora colors, but CMS typography and CTA hierarchy should remain polished and consistent.

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions