Komponentbygger
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
Vertical
Oslo, Norges hovedstad, er en pulserende by med et rikt kulturliv, vakre parker og enestÄende arkitektur. Oslo, Norges hovedstad, er en pulserende by med et rikt kulturliv, vakre parker og enestÄende arkitektur.
Oslo, Norges hovedstad, er en pulserende by med et rikt kulturliv, vakre parker og enestÄende arkitektur. Oslo, Norges hovedstad, er en pulserende by med et rikt kulturliv, vakre parker og enestÄende arkitektur.
Hele sommerferien, fra 21. juni til 21. august, reiser barn i fÞlge med voksne gratis pÄ trikk, buss, bane og bÄt i Oslo.
Horizontal
ByrÄdspartiene Arbeiderpartiet, SV og MDG har kommet til felles enighet med HÞyre og Venstre om Oslos smÄphusplan. SmÄhusplanen er viktig for Oslo, og det er nÄ et bredt politisk flertall bak planen.
Oslo, Norges hovedstad, er en pulserende by med et rikt kulturliv, vakre parker og enestÄende arkitektur. Oslo, Norges hovedstad, er en pulserende by med et rikt kulturliv, vakre parker og enestÄende arkitektur.
React kode eksempel pÄ innhold
// Using react
<PktCard
heading="Tittel"
subheading="Undertittel"
skin="blue"
layout="horizontal"
image={{ src: "/latest/assets/frontpage/park.png", alt: "" }}
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>