Here is a simple example where we use BEM notation to create a Card component.
HTML
Using the BEM notation we are defining the main block (the card) which contains elements (__) and modifiers (--).
<div class="card"> <span class="card__img"></span> <div class="card__content"> <ul class="card__list"> <li class="card__item card__item--active">Adobe XD</li> <li class="card__item">Figma</li> <li class="card__item">Sketch</li> </ul> <p class="card__desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero atque iste nobis quidem dolore error animi voluptas quia corrupti consectetur.</p> <a class="card__link" href="#">Visit the link</a> </div> </div> CSS
First we define the structure of the html and body elements.
body, html { margin: 0; height: 100vh; } body { display: grid; place-content: center; height: 100vh; background: rgb(238, 238, 238); font-family: 'Nunito', sans-serif; } Then we define the card block (.card) with its elements (__) and modifiers (--) using the BEM methology.
.card { padding: 0 5em; width: 300px; &__img { display: block; height: 300px; width: 100%; background: #2ae897; } &__content { padding: 1.5em; background: white; } &__list { list-style-type: none; display: flex; margin: 0; padding: 0; } &__item { padding: .3em .5em; margin-right: .5em; background: rgb(230, 230, 230); border-radius: .3em; font-size: .85em; &--active { background: #3b3030; color: #FFFFFF; font-weight: bold; } } &__link { background: #2ae897; color: #3b3030; text-decoration: none; padding: .5em 1em; border-radius: .5em; display: inline-block; margin-top: .5em; font-weight: bold; right: 0; &:hover { background: #575757; color: white; } } } Final result
Top comments (0)