Learn to code

Le Wagon's UI Kit.

Components & Layouts built by Le Wagon, for its community.

How does it work ?

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.

Title here

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">
      <h2>Title here</h2>
      <p>Short description here!</p>
    <h2 class="card-trip-pricing">£99.99</h2>
    <img src="https://kitt.lewagon.com/placeholder/users/krokrob" class="card-trip-user avatar-bordered" />
.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;

What do you need ?

Change your life, learn to code.

Le Wagon is an intensive 9-week coding bootcamp that teaches you how to code great tech products. Learn more about it