page HeroActionsBlock { layout = "gallery" seo { title = "Hero Actions block" } view {
← All blocks

Hero Actions

A ready-to-use section. Copy the complete example below.

Copy this example

page HeroActionsExample {
  view {
    <HeroActions actions='[{"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"},{"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"}]' align="left" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1" />
  }
}
} }