ArtefactCard

Nutze ArtefactCard um Artefakten, Gemälde, Archivalien und sonstige digitale Kunstwerke in Kachelform darzustellen.

Überblick
Live Demo
Formartierung
Referenzen
Feedback

Überblick

ArtefactCard visualisiert digitale Kunstwerke in Kachelform mit den ersten notwendigen Daten.

Wann zu verwenden

ArtefactCard ist für die Listung eines digitalen Kunstwerkes zu verwenden.

Formatierung

Anatomy

The modal is composed of three distinct zones: A header, the body, and a footer. Components (eg. data table, form, progress indicator) can occupy the full width of the modal.

Bildbereich: Enthält das Bild des digitalen Kunswerkes
Inhaltsbereich: Enthält den Titel, Subtitel und die Klassifikation des digitalen Kunstwerkes
Titel: Gibt die Hauptbezeichnung des digitalen Kunstwerkes
Klassifikation: Die Klassifikation des Kunstwerkes
Subtitel: Beschreibt den Untertitel

Code

Dokumentation

Das folgende Storybook zeigt ArtefactCard in einer Live Demo. Des Weiteren kann in dieser Testumgebung der Button mit verschiedenen Props und Variante getestet werden.

React Dokumentation

Code

ArtefactCard mit Standardwerten

CodeSandbox
<ArtefactCard />

Beispiel: ArtefactCard mit der Übergabe aller möglichen props

CodeSandbox
<ArtefactCard
  title={'Martin Luther als „Junker Jörg“'}
  subtitle={'Lucas Cranach der Ältere'}
  date={'1829'}
  classification={'Druckgrafik'}
  imgSrc={'https://lucascranach.org/application/files/5715/2205/3270/Martin-Luther-als-Junker-Joerg.jpg'}
  imgAlt={'lucas cranach image'}
/>

Props

property	propType	default	description
title	string	Doppelbildnis Friedrich der Weise	Haupttitel von des digitalen Kunstwerks
subtitle	string	Lucas Cranach der Ältere	Subtitel von des digitalen Kunstwerks
date	string	1877	Datum von des digitalen Kunstwerks
classification	string	Druckgrafik	Klassifikation von des digitalen Kunstwerks
imgSrc	string	https://lucascranach.org/application/files/1715/2120/9916/Portraet001.jpg	Bild von des digitalen Kunstwerks
imgAlt	string	Cranach Image	Alternativer Bildtext von des digitalen Kunstwerks

Referenzen

Siehe Beispiel

Feedback

Helfe uns um diese Komponente/Pattern zu verbessern, indem sie Feedback geben, fragen stelle oder andere Kommentare auf Github hinterlassen.

Atoms: Logo

Molecules: DefinitionList