This CSS-made component mimics a metro map, with stops.
This is for example useful to plan or summarize some ideas chronologically.
You can visit the demo webpage for a real world example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="metro.css"/>
<title>Metro stops by @filau</title>
</head>
<body>
<div class="filau-metro" style="--metro-line-color: #CD5C5C ; --metro-stop-color: #FFA07A; --metro-stop-font: 'Open Sans'">
<div>
<div>Info 1</div>
<div>Element 1</div>
</div>
<div>
<div>Info 2</div>
<div>Element 2</div>
</div>
<div>
<div>Info 3</div>
<div>Element 3</div>
</div>
<div>
<div>Info 4</div>
<div>Element 4</div>
</div>
<div>
<div>Info 5</div>
<div>Element 5</div>
</div>
</div>
</body>
</html>
This component is distributed under the GNU Lesser General Public License , version 3.
© 2022, Firmin Launay ([email protected])