Cards

Viser innhold strukturert som en eller flere kort.

Bruk

Cards-komponenten kan brukes til å vise ulike typer innhold (andre komponenter), i en kort-basert layout. Den kan brukes til å vise informasjon, bilder, lydklipp, videoer, og skjemakomponenter.

Anatomi

I skjermbildet over ser vi en Cards-komponent med 4 kort.

• Det første kortet har en ledetekst, beskrivelse og bruker en Image-komponent for å vise et bilde som media.
• Det andre kortet har en ledetekst, beskrivelse og bruker en Audio-komponent for å vise et lydklipp som media.
• Det tredje kortet har en ledetekst, beskrivelse og bruker en Video-komponent for å vise en video som media.
• Det fjerde kortet har en ledetekst, beskrivelse og bruker en Checkboxes-komponent for å vise en bekreftelses-sjekkboks under beskrivelsen.

Visuelt vil et kort vanligvis vise innhold i denne rekkefølgen:

• Øverst vises en media-komponent (f.eks. bilde, video, lydklipp), dersom det er spesifisert (i cards[0].media). Man kan også endre media-plasseringen til å vises nederst om man setter mediaPosition til bottom på komponenten.
• Under media vises ledeteksten, dersom man har angitt en (i cards[0].title).
• Under ledeteksten vises beskrivelsen, dersom man har angitt en (i cards[0].description).
• Under beskrivelsen vises innholdet i kortet, dersom det er spesifisert (i cards[0].children).
• Under innholdet vises eventuell tekst spesifisert i cards[0].footer.
• Nederst vises en eventuell media-komponent om denne er spesifisert, og mediaPosition er satt til bottom.

Stil

Denne komponenten har flere egenskaper for å styre utseendet. Det kan være verdt å eksperimentere med de ulike for å oppnå ønsket utseende, og noe som fungerer sammen med skjema-komponentene og eventuelle media-komponenter man bruker i kortene.

• color kan settes på komponenten for å styre bakgrunnsfargen til kortene. Her kan man velge mellom neutral og subtle.
• minWidth brukes til å bestemme hvor bredt hvert kort må være, som en minimumsverdi. Standardverdien om man ikke har angitt noe er 250px, og dette vil være styrende for hvor mange kort man kan ha på en rad. I tillegg til px kan man også bruke rem og % for å spesifisere bredden.
• minMediaHeight brukes til å bestemme minimums-høyden til komponenter man har spesifisert i media (f.eks. bilde, video, lydklipp). Standardverdien er 150px. Også her kan man bruke px, rem og % for å spesifisere høyden.

Egenskaper

Følgende er en liste over tilgjengelige egenskaper for Cards.

Konfigurering

Legg til komponent

{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
  "data": {
    "layout": [
      {
        "id": "myCards",
        "type": "Cards",
        "minWidth": "250px",
        "minMediaHeight": "150px",
        "mediaPosition": "top",
        "color": "subtle",
        "cards": [
          {
            "title": "Lydfil",
            "description": "Dette kan også være en ID på en tekstressurs",
            "media": "myAudio"
          },
          {
            "title": "cards.video.title",
            "description": "cards.video.description",
            "media": "myVideo"
          },
          {
            "title": "Med komponenter og footer, men uten media",
            "description": "Eksempeltekst",
            "children": ["myCheckboxes"],
            "footer": "Eksempeltekst"
          }
        ]
      }
    ]
  }
}