ArtefactIntro

Nutze ArtefactIntro, um einen Überblick-Bereich eines digtialen Kunstwerkes zu geben. Das ArtefactIntro soll eine Banner darstellen.

Überblick
Code
Formartierung
Feedback

Überblick

ArtefactIntro visualisiert ein digitales Kunstwerk, mit einem Logo, einem Textfeld und einem Button, der standardmäßig zur Webseite des Cranach Digital Archivs führt.

Wann zu verwenden

ArtefactIntro für den Intro eines einzelnes digitalen Kunstwerkes zu verwenden.

Formatierung

Anatomy

Dieser Organismus besteht auch Atome und Moleküle bildet einen Intro-Bereich ab.

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.

Container: Container in schwarzer Hintergrundfarbe. Zentriert alle Inhalte
Logo: Enthält ein Logo (Atom)
ArtefactCard: Enthält das Molekül ArtefactCard (Molecule)
Paragraph: Ein Paragraphtext für eine detailierte Erläuterung dieses Intros
Button: Enthält eine Button (Atom)

Code

Dokumentation

Das folgende Storybook zeigt ArtefactIntro in einer Live Demo. Des Weiteren kann in dieser Testumgebung ArtefactIntro mit verschiedenen Props, Werten und Variante getestet werden.

React Dokumentation

Code

ArtefactIntro mit Standardwerten

CodeSandbox
<ArtefactIntro />

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

CodeSandbox
<ArtefactIntro
  logoTitle={'cranach digital archive_'}
  artefactCardTitle={'Doppelbildnis Friedrich der Weise'}
  artefactCardSubtitle={'Lucas Cranach der Ältere'}
  artefactCardDate={'1510'}
  artefactCardImgSrc={'https://lucascranach.org/application/files/5715/2205/3270/Martin-Luther-als-Junker-Joerg.jpg'}
  artefactCardImgAlt={'cranach image'}
  artefactCardClassification={'Druckgrafik'}

Props

property	propType	default	Optionen	description
logoTitle	string	cda_		Beschriftung des Logos
artefactCardTitle	string	Doppelbildnis Friedrich der Weise		Haupttitel von des digitalen Kunstwerks
artefactCardSubtitle	string	Lucas Cranach der Ältere		Subtitel von des digitalen Kunstwerks
artefactCardDate	string	1510		Datum von des digitalen Kunstwerks
artefactCardImgSrc	string	https://lucascranach.org/application/files/1715/2120/9916/Portraet001.jpg		Bild von des digitalen Kunstwerks
artefactCardImgAlt	string	Cranach Image		Alternativer Bildtext von des digitalen Kunstwerks
artefactCardClassification	string	Lucas Cranach der Ältere		Klassifikation von des digitalen Kunstwerks
paragraphText	string	type your text		Detaillierter Text zur Erläuterung des Intros
buttonSize	string	medium	`small`, `medium`, `large`	Festlegung der Größe, Standard
buttonLabel	string	type your label		Beschriftung des Buttons

Feedback

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

Molecules: DefinitionList

Organism: ArtefactDetails