By Espina Studio
Suscribe to our newsletter & get early
access to new content.
Cards
Overview
Cards are surfaces that display content and actions on a single topic.
<div class="col-6">
<div class="column-card column-card-hover d-flex flex-column">
<div class="card-image pb-20">
<figure class="img-wrap br-15 mb-0">
<a href="https://codebase.anagrama.com/process/management-values/">
<img src="https://codebase.anagrama.com/wp-content/uploads/2022/01/img-2-1568x828.png"
alt="¿Qué hace un buen Project Manager?" class="w-100">
</a>
</figure>
</div>
<div class="card-description h3 d-flex">
<div>
<a href="https://codebase.anagrama.com/process/management-values/">
<h3>¿Qué hace un buen Project Manager?</h3>
</a>
</div>
<img src="https://codebase.anagrama.com/wp-content/uploads/2021/08/process.png"
class="icon-process flex-shrink-0 ml-auto">
</div>
</div>
</div>
Octubre 16, 2020
<div class="col-6">
<div class="column-card column-card-image column-card-varsity d-flex flex-column">
<div class="card-image">
<figure class="img-wrap mb-0">
<a href="#">
<img src="https://htmlcolorcodes.com/assets/images/colors/gray-color-solid-background-1920x1080.png" class="lazyload" alt="test image" class="w-100">
</a>
</figure>
</div>
<div class="card-description mt-20">
<div class="mb-10 text-left">
<!-- CHIP -->
<div class="chip text-center mr-15 mb-10 mb-md-0">
<label class="mb-0 ">Ownership</label>
</div>
<!-- END: CHIP -->
<div class="d-block d-md-inline-block">
Octubre 16, 2020
</div>
</div>
<div>
<a href="#">
<div class="card-text text-left">
<h2>¿Cómo Evaluar el Ownership?</h2>
</div>
<div class="d-flex c-medium-gray mt-5">
<div class="pr-10 mr-10 text-separator-r">
Por
</div>
<div>
Carolina Ortiz
</div>
</div>
</a>
</div>
</div>
</div>
</div>.column-card-image .img-wrap {
border-radius: 4px;
overflow: hidden;
border-top: 4px solid;
}
.chip {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 60px;
padding: 6px 10px 7px;
border: 1px solid black;
}
Use the class “card” or “column-card” to define where the card element starts.
Copied to clipboard