Komponentbygger
OBS! Denne komponenten er under utvikling og anbefales ikke brukt i produksjon.
Her kan du teste ut alle egenskapene til PktCard, og fÄ ferdig kode for React og Custom Element. Dessverre stÞtter ikke komponentbyggeren ennÄ avanserte props som image og tags. Se under komponentbyggeren for eksempler pÄ bruk!
Eksempler pÄ bruk
Portrait
Tamkatt er et lite rovpattedyr i kattefamilien og inngÄr i tamkattlinjen. Tamkatten deles videre inn som enten huskatter eller rasekatter. Mange kaller ogsÄ tamkatten katt, pus, pusekatt eller kattepus, uavhengig av om den er en huskatt eller en rasekatt.
Cats walk like camels and giraffes: They move both of their right feet first, then move both of their left feet. No other animals walk this way. They can also rotate their ears 180 degrees. Very cool.
Landscape
Tamkatt er et lite rovpattedyr i kattefamilien og inngÄr i tamkattlinjen. Tamkatten deles videre inn som enten huskatter eller rasekatter. Mange kaller ogsÄ tamkatten katt, pus, pusekatt eller kattepus, uavhengig av om den er en huskatt eller en rasekatt.
React kode eksempel pÄ innhold
// Using react
<PktCard
heading="Tittel"
subheading="Undertittel"
skin="blue"
direction="landscape"
image={{ src: "/latest/assets/frontpage/park.png", alt: "A random cat" }}
tags={[
{ text: "Tag", skin: "grey" },
{ text: "Tag", skin: "green" },
]}
>
<p class="pkt-size-18-light">
Husk Ä legge til styling klassen slik for Ä fÄ riktig stÞrrelse pÄ tekstinnholdet.
Knapp & lenke mÄ ogsÄ legges til av bruker selv.
</p>
</PktCard>
Hvordan ta i bruk?
//React
import { PktCard } from "@oslokommune/punkt-react"
//Custom Element
import "@oslokommune/punkt-elements/dist/pkt-card.js"
//Custom Element fra CDN
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-card.js"></script>