{# eyebrow: a short "what's new" line shown as an outline pill. actions: one lg button and at most one outline. #}
{% props title: String, lead: String, eyebrow: String = "", actions: Slot = Slot::default(), aside: Slot = Slot::default() %}
<section class="ui-section">
<div class="ui-hero">
<div>
{%- if !eyebrow.is_empty() %}<span class="ui-badge" data-variant="outline" data-shape="pill">{{ eyebrow }}</span>{% end %}
<h1 class="ui-hero-title">{{ title }}</h1>
<p class="ui-hero-lead">{{ lead }}</p>
<div class="ui-hero-actions">{{ actions }}</div>
</div>
<div class="ui-hero-aside" aria-hidden="true">{{ aside }}</div>
</div>
</section>