Card

A "card" is a compact rectangular unit representing a single idea. Cards typically contain interactive elements such as text, links, buttons, or images. Still, the primary purpose is to provide a brief overview of a topic and allow for easy exploration by clicking through to more information on another page.

The cards present information succinctly and offer a quick way to delve deeper into the subject.

Green and orange electric scooters on parking

Example

This is how it looks on small screens:

Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Code behind Example:
<div class="cardssection"> <div class="allcards"> <article class="cards"> <div class="image">Image</div> <div> <h3>Lorem ipsum dolor sit amet</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <button class="cards-btn">Learn more</button> </div> </article> <article class="cards"> <div class="image">Image</div> <div> <h3>Lorem ipsum dolor sit amet</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <button class="cards-btn">Learn more</button> </div> </article> <article class="cards"> <div class="image">Image</div> <div> <h3>Lorem ipsum dolor sit amet</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <button class="cards-btn">Learn more</button> </div> </article> </div> </div>

Html:

.cardssection { width: 100%; } .allcards { display: flex; flex-direction: column; align-items: center; } .image{background-color: #191b1a; color: whitesmoke; text-align: center; width:100%; height: 250px;} .cards { box-sizing: border-box; width: 350px; max-width: fit-content; margin-bottom: 48px; } .cards-btn { font-weight: 600; background-color: #FE9C00; color: #191b1a; font-size: 16px; border: none; border-radius: 5px; padding: 12px 24px; } .cards-btn:hover{ background-color: #191b1a; color: #FE9C00;}

Css:

This is how it looks on DeskTop/Big screens:

Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Code behind Example:
<div class="cardssection"> <div class="allcards"> <article class="cards"> <div class="image">Image</div> <div> <h3>Lorem ipsum dolor sit amet</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <button class="cards-btn">Learn more</button> </div> </article> <article class="cards"> <div class="image">Image</div> <div> <h3>Lorem ipsum dolor sit amet</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <button class="cards-btn">Learn more</button> </div> </article> <article class="cards"> <div class="image">Image</div> <div> <h3>Lorem ipsum dolor sit amet</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <button class="cards-btn">Learn more</button> </div> </article> </div> </div>

Html:

.cardssection { width: 100%; } .allcards { display: flex; justify-content:space-between; } .image{background-color: #191b1a; width:100%; height: 250px;} .cards { box-sizing: border-box; width: 350px; } .cards-btn { font-weight: 600; background-color: #FE9C00; color: #191b1a; font-size: 16px; border: none; border-radius: 5px; padding: 12px 24px; } .cards-btn:hover{ background-color: #191b1a; color: #FE9C00;}

Css: