Hero component is used to create an impression for a page.
Name Description
slot[name="breadcrumbs"] The breadcrumbs for the hero
slot[name="edit-description"] A slot for handling inline editing of the description attribute, if the attribute is present this will not be shown
slot[name="edit-header"] A slot for handling inline editing of the header attribute, if the attribute is present this will not be shown
slot[name="media"] The media that is presented on the hero
part::(base) The base suite-grid element
part::(content) The wrapper around the breadcrumbs slot, header, and description
part::(description) The suite-text element for the description
part::(header) The suite-text element for the header
part::(media) The div wrapper around the media slot
Default Hero
Syracuse University Second Link
Inverse Hero
Syracuse University Second Link
Landing Hero
Syracuse University Second Link
Landing Inverse Hero
Syracuse University Second Link
Hero component is used to create an impression for a page.
Name Description
slot[name="cta"] The call-to-action for the hero
slot[name="edit-header"] Used to allow for inline editing of the header attribute. If the header attribute is present, this slot is hidden.
slot[name="media"] The media that is presented on the hero
part::(base) The base suite-grid element
part::(content) The wrapper around the header and cta-slot
part::(cta-wrapper) The div element that wraps the cta slot
part::(header) The suite-text element for the header
part::(header-wrapper) The div element that wraps the header and the edit-header slot
part::(media) The suite-media elemen wrapper around the media slot
Home Page Hero
Button