Card

<p className="jkl-heading-1 jkl-spacing-xl--bottom">Åpne skadesaker</p>
<div style={{ display: "flex", gap: "16px" }}>
    <NavCard href="#" title="Knust skjerm" tag={{ type: "warning", text: "Krever handling" }}>
        <InfoBlock>Svar fra verksted</InfoBlock>
    </NavCard>
    <NavCard href="#" title="Forsinket bagasje" tag={{ type: "success", text: "Godkjent" }} />
</div>

<NavCard
    padding="l"
    href="#"
    title="Behandlings- og Veterinærutgifter"
    description="Balder"
    tag={{ type: "success", text: "Behandles" }}
>
    <InfoBlock>
        Skadedato
        <br />
        01.12.2021
    </InfoBlock>
</NavCard>

const [selected, setSelected] = useState(false);
const [contentRef] = useAnimatedHeight<HTMLDivElement>(selected);

return (
    <TaskCard bgColor={selected ? "hvit" : "dis"} withShadow={selected} padding="l">
        <Checkbox
            id="veterinar-checkbox"
            aria-controls="veterinar-expanded-content"
            aria-expanded={selected}
            name="veterinar"
            value="veterinar"
            onChange={() => setSelected((selected) => !selected)}
        >
            Veterinærutgifter
        </Checkbox>
        <p className="jkl-body jkl-spacing-s--top">
            Dekker veterinærutgifter og medisiner på resept, som ofte kan bli dyrt.
        </p>
        <div
            id="veterinar-expanded-content"
            aria-labelledby="veterinar-checkbox"
            role="group"
            className="jkl-task-card-example__content"
            hidden={!selected}
            ref={contentRef}
        >
            <Select
                label="Forsikringssum"
                name="forsikringssum"
                className="jkl-spacing-xl--top"
                items={["10 000 kr", "20 000 kr", "30 000 kr"]}
            />
            <Select
                label="Velg egenandel"
                name="egenandel"
                className="jkl-spacing-l--top"
                items={["1 500 kr", "2 500 kr", "3 000 kr"]}
            />
            <FieldGroup className="jkl-spacing-l--top" legend="Tilleggsforsikring">
                <Checkbox name="tilleggsforsikring" value="rehab">
                    Dekning av rehabilitering
                </Checkbox>
            </FieldGroup>
            <p className="jkl-body jkl-spacing-xl--top">
                Dersom du ønsker ekstra forsikring av valpekull, må du ta kontakt med en rådgiver.
            </p>
        </div>
    </TaskCard>
);

<InfoCard
    padding="l"
    href="#"
    title="Behandlings- og Veterinærutgifter"
/>