Webkomponenten/Webcomponents sind HTML5 Elemente die sich leicht wiederverwenden lassen. Sie kapseln dabei HTML 5 Markup, Javascript und CSS Styles in einem „shadow Dom“ und laufen als isolierter Teil der Seite.

Ich habe eine Komponente entwickelt, die eine Firmengeschichte/Lebenslauf oder andere zeitliche Abläufe anschaulich und responsiv darstellt.

Beispiel:

Notarvertrag für das Grundstück unterzeichnet

Bauantrag wurde beim Bauamt gestellt

Bauantrag wurde genehmigt

Entfernung alter Baumbestand

Bager auf dem Grundstück, Erdarbeiten

Errichtung Erdgeschoss/Dachgeschoss

Diese Ansicht wurde mit folgendem HTML5 Markup erzeugt:

<ds-history data-elementminwidth="200">
	<div data-title="Grundstücksbesichtigung" data-year="November 2020"></div> 
	<div data-title="Grundstückskauf" data-year="Dezember 2020">Notarvertrag für das Grundstück unterzeichnet</div> 
	<div data-title="Bauantrag" data-year="März 2021">Bauantrag wurde beim Bauamt gestellt</div> 
	<div data-title="Baugenehmigung" data-year="August 2021">Bauantrag wurde genehmigt</div> 
	<div data-title="Bauvorbereitung" data-year="September 2021">Entfernung alter Baumbestand</div> 
	<div data-title="Baubeginn" data-year="Oktober 2021">Bager auf dem Grundstück, Erdarbeiten</div> 
	<div data-title="Baufortschritt" data-year="Dezember 2021">Errichtung Erdgeschoss/Dachgeschoss</div> 
    <style>
        .ds_history .element > * { text-align:center;  } 
        .copyright a { color:#FFFFFF !important; }
    </style>
</ds-history>

<style>
    
    ds-history { margin:0.5rem 0; border: 1px solid white; padding:0.5rem; 
      --background-color:transparent;
      --line-color:white;
      --circle-color:white;
      --text-color:white;
      --arrow-color:white;
    }
    
</style>

<script src="https://daschmi.de/wp-content/plugins/ds_history/js/ds_history.component.js"></script>

Weitere Beispiele gibt es hier.