Card

Kortkomponentene lar oss løfte frem informasjon eller oppgaver som hører sammen.

Kom i gang

Installer

npm i @fremtind/jkl-card-react

Bruk

import { NavCard } from "@fremtind/jkl-card-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-card/card.min.css";

// Kortene bruker flere andre komponenter avhengig av konfigurasjon. Du må også laste inn disse stilarkene.
import "@fremtind/jkl-button/button.min.css";
import "@fremtind/jkl-checkbox/checkbox.min.css";
import "@fremtind/jkl-image/image.min.css";
import "@fremtind/jkl-select/select.min.css";
import "@fremtind/jkl-tag/tag.min.css";

// Eller importer stilark via SCSS.
@use "@fremtind/jkl-card/card";
@use "@fremtind/jkl-button/button";
@use "@fremtind/jkl-checkbox/checkbox";
@use "@fremtind/jkl-image/image";
@use "@fremtind/jkl-select/select";
@use "@fremtind/jkl-tag/tag";

React

Versjon
Dokumentasjon: Readme; Changelog

Live demo

NavCard

<NavCard
  padding={'24'}
  href="#"
  title="Behandlings- og Veterinærutgifter"
  tag={false ? { type: "success", text: "Behandles" } : null}
  description={false ? "Balder" : undefined}
  image={
    false ? { src: "/media/grass.webp", alt: "gress" } : undefined
  }
>
  {false ? (
    <InfoBlock>
      {" "}
      Skadedato <br /> 01.12.2021
    </InfoBlock>
  ) : null}
</NavCard>

React API

Her finner du en oversikt over props på komponentene i pakken.