Le Wagon's UI Kit.
Components & Layouts built by Le Wagon, for its community.
Components & Layouts built by Le Wagon, for its community.
We have created various, often-used web components for you to build from. Just click COPY on either the HTML or the CSS to get started.
Short description here!
<div class="card-trip">
<img src="https://raw.githubusercontent.com/lewagon/fullstack-images/master/uikit/greece.jpg" />
<div class="card-trip-infos">
<div>
<h2>Title here</h2>
<p>Short description here!</p>
</div>
<h2 class="card-trip-pricing">£99.99</h2>
<img src="https://kitt.lewagon.com/placeholder/users/krokrob" class="card-trip-user avatar-bordered" />
</div>
</div>
.card-trip {
overflow: hidden;
background: white;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.card-trip > img {
height: 200px;
width: 100%;
object-fit: cover;
}
.card-trip h2 {
font-size: 16px;
font-weight: bold;
margin: 0;
}
.card-trip p {
font-size: 12px;
opacity: .7;
margin: 0;
}
.card-trip .card-trip-infos {
padding: 16px;
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
}
.card-trip-infos .card-trip-user {
position: absolute;
right: 16px;
top: -20px;
width: 40px;
}
Le Wagon is an intensive 9-week coding bootcamp that teaches you how to code great tech products. Learn more about it