When active, the card itself can gain the status "mouseover".
Wraps the slots with a hylo-page-width component.
Css classes for the background content.
Enables the zoom animation of the background content on hover and focus.
Can be set as boolean or as a comma separated string of breakpoints.
Css classes for the end content.
Css classes for the foreground content.
Css classes for the main content.
Reverses the order the start, main and end content is displayed. The markup stays the same.
Can be set as boolean or as a comma separated string of breakpoints.
Css classes for the start content.
Is the card vertical oriented.
Can be set as boolean or as a comma separated string of breakpoints.
Fires when the component gains or looses focus through the "tab" key. The component also toggles the class "hylo-has-focus". The card has to have the appropriate tabindex (usually 0) to be able to gain focus.
The emitted boolean value indicates whether the component gained or lost the focus.
Fires when the component gains or looses "mouseover". The component also toggles the class "hylo-has-mouseover". Does not fire when the "mouseover" was gained through a touch event. The component has to be "active".
The emitted boolean value indicates whether the component gained or lost "mouseover".
Generated using TypeDoc
A card which provides functionality and several slots to place/structure content. It is possible to nest hylo-card(s), to place a hylo-card inside a slot of another hylo-card to create more complex structures.
A hylo-card itself can not gain the status "visited", "focus", "mouseover", "active" or "disabled" but provides styles and functionality when part/child of a component which does. (exceptions see events)
You can force the state styles of the component by applying the classes "hylo-visited", "hylo-focus", "hylo-hover", "hylo-active", "hylo-disabled" respectively.
The foreground content area has pointer-events: none; set by default. Any active element in the foreground has to be set either pointer-events: auto; or pointer-events: all;.
If the start, main or end content area is empty, its style will be set to display: none;.
Uses the following slots: