@lmc-eu/jobs-web

Cover

Example usage:

<Cover>
    {# Header #}
    <Container variant="cygnus" class="pt-800 pb-1400 pb-tablet-800 text-center">
        <CoverTitle />
        {# ... #}
    </Container>
</Cover>

Example usage - simple:

<Cover>
    Content
</Cover>

Example usage - plane variant:

<Cover illustration="plane">
    {# Header #}
    <Container variant="cygnus" UNSAFE_className="pt-1100 pb-700">
        <h1 class="typography-heading-medium-text">Title</h1>
        {# ... #}
    </Container>
</Cover>

Example usage - plane variant with illustration visible from tablet up:

<Cover illustration="plane" illustrationVisibleBreakpoint="tablet">
    {# Header #}
    <Container variant="cygnus" UNSAFE_className="pt-1100 pb-700">
        <h1 class="typography-heading-medium-text">Title</h1>
        {# ... #}
    </Container>
</Cover>

API

Prop name	Type	Default	Required	Description
illustration	string	boat	no	Which illustration should be used. One of boat, plane
illustrationVisibleBreakpoint	string	null	no	From which breakpoint should be the illustration visible, if not set, the animation is visible all the time
isCondensed	bool	false	no	If true, set lower minimum height

You can add id, data-* or aria-* attributes to further extend the component's descriptiveness and accessibility. Also, UNSAFE styling props are available, see the Escape hatches section in Spirit's README to learn how and when to use them.