qds-hero

A responsive hero banner component for high-emphasis page intros, campaign headers, and dashboard landing sections.

Features

• Eyebrow, title, and supporting body copy
• Optional media panel
• Primary and secondary calls to action
• Responsive two-column layout that collapses to one column on smaller screens
• Themed using QDS CSS variables

Basic Usage

<qds-hero
  eyebrow="Quarterly Update"
  heading="Portfolio performance with a clear operating narrative"
  body="Use hero sections to establish context before the rest of the content flow begins."
  media-src="https://placehold.co/960x640?text=Hero"
  media-alt="Illustrative portfolio image"
  primary-label="Open Dashboard"
  primary-href="#dashboard"
  secondary-label="Read Memo"
  secondary-href="#memo"
></qds-hero>

Attributes

Attribute	Type	Default	Description
eyebrow	String	""	Small label shown above the main title
heading	String	""	Main hero headline (named heading to avoid the global HTML title tooltip attribute)
body	String	""	Supporting paragraph copy
media-src	String	""	Optional image URL
media-alt	String	""	Alt text for the hero image
primary-label	String	""	Primary action label
primary-href	String	""	Primary action href
primary-target	String	_self	Primary action target
secondary-label	String	""	Secondary action label
secondary-href	String	""	Secondary action href
secondary-target	String	_self	Secondary action target
align	String	left	Content alignment: left, center, or right