Render custom content
You can also render custom content and display almost anything inside the timeline cards.
To render custom content, wrap the custom content in a div and pass it as a child element to the Chrono
component.
jsx
<Chrono
mode="VERTICAL"
>
<div>
<div style={{ width: "250px", height: "250px" }}>
<img
style={{ maxWidth: "100%", maxHeight: "100%" }}
alt="test"
src="https://cdn.tutsplus.com/net/uploads/2013/08/github-collab-retina-preview.gif"
/>
</div>
</div>
<div>
<h3>This is a List</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div>
<h3>Dunkirk</h3>
<p>
The Battle of Dunkirk (French: Bataille de Dunkerque) was fought
in Dunkirk (Dunkerque), France, during the Second World War,
between the Allies and Nazi Germany.
</p>
</div>
<div style={{ margin: "1rem" }}>
<h3>Table</h3>
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
</tr>
</tbody>
</table>
</div>
</Chrono>