Cards

Informação importante

Se você preferir poderá usar o 'CMS' para definir as imagens e textos dos cards. Para mais informações sobre como usar o 'CMS' acesse nossa documentação: https://docs.increazy.com/docs/dash/cms/intro

Card padrão com autor

Preview

HTML

<article class="article-card">
   <a href="#">
      <figure class="article-card__image">
         <img src="https://picsum.photos/360/180" alt="image" title="image" loading="lazy">
      </figure>

      <div class="article-card__content">
         <span class="article-card__content--category">Category</span>
         <h2 class="article-card__content--title">Why Japanese Websites Look So Different</h2>
         <p class="article-card__content--subtitle">& how to analyze design choices without jumping to conclusions over the years...</p>
      </div>

      <div class="article-card__footer">
         <figure class="author__avatar">
            <img src="https://picsum.photos/32?grayscale" alt="avatar" title="avatar">
         </figure>
         <small class="author__name">John Doe</small>
         <svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="1.5" cy="2" r="1.5" fill="#A7A7A7"/>
         </svg>
         <span>8 min. read</span>
      </div>
   </a>
</article>

CSS

.article-card{
  width: 100%;
  height: auto;
  background-color: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
}

.article-card:hover{
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 12px;
}

.article-card__image{
  padding: 8px 8px 0px 8px;
  background-color: #fff;
  border-radius: 4px 4px 0px 0px;
}

.article-card__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.article-card__content{
  padding: 16px 20px 0px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}

.article-card__content--category{
  font-size: 12px;
  font-weight: 500;
  line-height: 16.8px;
  color: #FF3939;
}

.article-card__content--title{
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: #2C2C2C;
}

.article-card__content--subtitle{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #8E8E8E;
}

.article-card__footer{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: 8px;
  padding: 0px 20px 20px 20px;
}

.author__avatar{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
}

.author__name{
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  text-align: left;
  color: #2C2C2C;
}

.article-card__footer span{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #8E8E8E;
}

Card padrão com botão

Preview

HTML

<article class="article-card">
   <figure class="article-card__image">
      <img src="https://picsum.photos/360/180" alt="image" title="image" loading="lazy">
   </figure>

   <div class="article-card__content">
      <span class="article-card__content--category">Category</span>
      <h2 class="article-card__content--title">Why Japanese Websites Look So Different</h2>
      <p class="article-card__content--subtitle">& how to analyze design choices without jumping to conclusions over the years...</p>
   </div>

   <div class="article-card__footer">
      <a class="article-card__footer-link" href="#">
         <span>Read more</span>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 11V8L16 12L12 16V13H8V11H12ZM12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20Z" fill="black"/>
         </svg>
      </a>
   </div>
</article>

CSS

.article-card {
  width: 100%;
  height: auto;
  background-color: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
}

.article-card:hover {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 12px;
}

.article-card__image {
  padding: 8px 8px 0px 8px;
  background-color: #fff;
  border-radius: 4px 4px 0px 0px;
}

.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.article-card__content {
  padding: 16px 20px 0px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}

.article-card__content--category {
  font-size: 12px;
  font-weight: 500;
  line-height: 16.8px;
  color: #FF3939;
}

.article-card__content--title {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: #2C2C2C;
}

.article-card__content--subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #8E8E8E;
}

.article-card__footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: 8px;
  padding: 0px 20px 20px 20px;
}

.article-card__footer-link{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
}

.article-card__footer-link span {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: #01141E;
  margin-right: 8px;
}

Card para categorias com imagem e título

Preview

HTML

<article class="category-card">
   <a href="#">
      <figure class="category-card__image">
            <img src="https://picsum.photos/160" alt="image" title="image" loading="lazy"/>
      </figure>
      <h2 class="category-card__title">Technology</h2>
   </a>
</article>

CSS

.category-card a{
  width: 160px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.category-card__image{
  width: 160px;
  height: 160px;
  overflow: hidden;
  border: 1px solid #E6E6E6;
  border-radius: 100%;
}

.category-card a:hover .category-card__image {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 12px;
}

.category-card__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform ease-in-out 350ms;
}

.category-card a:hover .category-card__image img {
  transform: scale(1.18);
}

.category-card__title{
  width: 160px;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.03em;
  color: #434343;
  text-align: center;
  word-wrap: break-word;
}

.category-card a:hover .category-card__title {
  color: #000000;
}

Card para categorias com ícone e título

Preview

HTML

<article class="category-card">
   <a href="#">
      <div class="category-card__icon">
         <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M44.3334 46.6667H11.6667V49C11.6667 49.6188 11.4209 50.2123 10.9833 50.6499C10.5457 51.0875 9.95225 51.3333 9.33341 51.3333H7.00008C6.38124 51.3333 5.78775 51.0875 5.35017 50.6499C4.91258 50.2123 4.66675 49.6188 4.66675 49V25.6667L10.4534 12.1613C10.8135 11.3213 11.4123 10.6056 12.1755 10.1028C12.9388 9.6001 13.8328 9.33253 14.7467 9.33335H41.2534C42.1665 9.33345 43.0596 9.60144 43.8219 10.1041C44.5842 10.6068 45.1823 11.3221 45.5421 12.1613L51.3334 25.6667V49C51.3334 49.6188 51.0876 50.2123 50.65 50.6499C50.2124 51.0875 49.6189 51.3333 49.0001 51.3333H46.6667C46.0479 51.3333 45.4544 51.0875 45.0168 50.6499C44.5792 50.2123 44.3334 49.6188 44.3334 49V46.6667ZM46.6667 30.3333H9.33341V42H46.6667V30.3333ZM9.74408 25.6667H46.2561L41.2557 14H14.7467L9.74641 25.6667H9.74408ZM15.1667 39.6667C14.2385 39.6667 13.3483 39.2979 12.6919 38.6416C12.0355 37.9852 11.6667 37.0949 11.6667 36.1667C11.6667 35.2384 12.0355 34.3482 12.6919 33.6918C13.3483 33.0354 14.2385 32.6667 15.1667 32.6667C16.095 32.6667 16.9852 33.0354 17.6416 33.6918C18.298 34.3482 18.6667 35.2384 18.6667 36.1667C18.6667 37.0949 18.298 37.9852 17.6416 38.6416C16.9852 39.2979 16.095 39.6667 15.1667 39.6667ZM40.8334 39.6667C39.9052 39.6667 39.0149 39.2979 38.3585 38.6416C37.7022 37.9852 37.3334 37.0949 37.3334 36.1667C37.3334 35.2384 37.7022 34.3482 38.3585 33.6918C39.0149 33.0354 39.9052 32.6667 40.8334 32.6667C41.7617 32.6667 42.6519 33.0354 43.3083 33.6918C43.9647 34.3482 44.3334 35.2384 44.3334 36.1667C44.3334 37.0949 43.9647 37.9852 43.3083 38.6416C42.6519 39.2979 41.7617 39.6667 40.8334 39.6667Z" fill="#434343"/>
         </svg>
      </div>
      <h2 class="category-card__title">Automotive</h2>
   </a>
</article>

CSS

.category-card a{
  width: 160px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.5s;
}

.category-card a:hover {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 12px;
  background-color: #F5F5F5;
}

.category-card__icon{
  width: 160px;
  height: 120px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-card__icon svg path{
  transition: all 0.5s;
}

.category-card a:hover .category-card__icon svg path{
  fill: #000000;
}

.category-card__title{
  width: 160px;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.03em;
  color: #434343;
  text-align: center;
  word-wrap: break-word;
  padding-bottom: 16px;
  transition: all 0.5s;
}

.category-card a:hover .category-card__title {
  color: #000000;
}

Card para categorias em formato de pílula

Preview

HTML

<article class="category-card">
   <a href="#">
      <figure class="category-card__image">
            <img src="https://picsum.photos/40" alt="image" title="image" loading="lazy"/>
      </figure>
      <h2 class="category-card__title">Automotive</h2>
   </a>
</article>

CSS

.category-card a{
  width: fit-content;
  height: 56px;
  border: 1px solid #E6E6E6;
  border-radius: 44px;
  padding: 8px 16px 8px 8px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  background-color: #fff;
}

.category-card a:hover{
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 12px;
}

.category-card__image{
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 999px;
}

.category-card__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform ease-in-out 350ms;
}

.category-card a:hover .category-card__image img {
  transform: scale(1.18);
}

.category-card__title{
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.03em;
  color: #434343;
}

Card de características com descrição

Preview

HTML

<article class="feature-card">
   <div class="feature-card__icon">
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M11.9533 24.0001C11.7948 25.1125 11.2403 26.1304 10.3916 26.8667C9.54284 27.6031 8.45694 28.0085 7.33331 28.0085C6.20969 28.0085 5.12379 27.6031 4.27507 26.8667C3.42636 26.1304 2.87182 25.1125 2.71331 24.0001H1.33331V8.00014C1.33331 7.64652 1.47379 7.30738 1.72384 7.05733C1.97389 6.80729 2.31302 6.66681 2.66665 6.66681H21.3333C21.6869 6.66681 22.0261 6.80729 22.2761 7.05733C22.5262 7.30738 22.6666 7.64652 22.6666 8.00014V10.6668H26.6666L30.6666 16.0748V24.0001H27.9533C27.7948 25.1125 27.2403 26.1304 26.3916 26.8667C25.5428 27.6031 24.4569 28.0085 23.3333 28.0085C22.2097 28.0085 21.1238 27.6031 20.2751 26.8667C19.4264 26.1304 18.8718 25.1125 18.7133 24.0001H11.9533ZM20 9.33348H3.99998V20.0668C4.52606 19.5297 5.17411 19.1277 5.88898 18.895C6.60385 18.6622 7.36437 18.6056 8.10582 18.73C8.84726 18.8544 9.54768 19.1561 10.1475 19.6093C10.7472 20.0626 11.2286 20.6541 11.5506 21.3335H19.116C19.34 20.8628 19.64 20.4348 20 20.0668V9.33348ZM22.6666 17.3335H28V16.9535L25.3226 13.3335H22.6666V17.3335ZM23.3333 25.3335C23.8639 25.3335 24.3728 25.1227 24.748 24.7475C25.1232 24.3723 25.334 23.8634 25.334 23.3328C25.334 22.8022 25.1232 22.2933 24.748 21.9181C24.3728 21.5429 23.8639 21.3321 23.3333 21.3321C22.8027 21.3321 22.2938 21.5429 21.9186 21.9181C21.5434 22.2933 21.3326 22.8022 21.3326 23.3328C21.3326 23.8634 21.5434 24.3723 21.9186 24.7475C22.2938 25.1227 22.8027 25.3335 23.3333 25.3335ZM9.33331 23.3335C9.33331 23.0708 9.28158 22.8108 9.18107 22.5681C9.08056 22.3255 8.93324 22.105 8.74753 21.9193C8.56181 21.7335 8.34133 21.5862 8.09868 21.4857C7.85603 21.3852 7.59596 21.3335 7.33331 21.3335C7.07067 21.3335 6.8106 21.3852 6.56795 21.4857C6.32529 21.5862 6.10482 21.7335 5.9191 21.9193C5.73338 22.105 5.58606 22.3255 5.48555 22.5681C5.38504 22.8108 5.33331 23.0708 5.33331 23.3335C5.33331 23.8639 5.54403 24.3726 5.9191 24.7477C6.29417 25.1228 6.80288 25.3335 7.33331 25.3335C7.86375 25.3335 8.37245 25.1228 8.74753 24.7477C9.1226 24.3726 9.33331 23.8639 9.33331 23.3335Z" fill="#2C2C2C"/>
         <path d="M11.9533 24.0001C11.7948 25.1125 11.2403 26.1304 10.3916 26.8667C9.54284 27.6031 8.45694 28.0085 7.33331 28.0085C6.20969 28.0085 5.12379 27.6031 4.27507 26.8667C3.42636 26.1304 2.87182 25.1125 2.71331 24.0001H1.33331V8.00014C1.33331 7.64652 1.47379 7.30738 1.72384 7.05733C1.97389 6.80729 2.31302 6.66681 2.66665 6.66681H21.3333C21.6869 6.66681 22.0261 6.80729 22.2761 7.05733C22.5262 7.30738 22.6666 7.64652 22.6666 8.00014V10.6668H26.6666L30.6666 16.0748V24.0001H27.9533C27.7948 25.1125 27.2403 26.1304 26.3916 26.8667C25.5428 27.6031 24.4569 28.0085 23.3333 28.0085C22.2097 28.0085 21.1238 27.6031 20.2751 26.8667C19.4264 26.1304 18.8718 25.1125 18.7133 24.0001H11.9533ZM20 9.33348H3.99998V20.0668C4.52606 19.5297 5.17411 19.1277 5.88898 18.895C6.60385 18.6622 7.36437 18.6056 8.10582 18.73C8.84726 18.8544 9.54768 19.1561 10.1475 19.6093C10.7472 20.0626 11.2286 20.6541 11.5506 21.3335H19.116C19.34 20.8628 19.64 20.4348 20 20.0668V9.33348ZM22.6666 17.3335H28V16.9535L25.3226 13.3335H22.6666V17.3335ZM23.3333 25.3335C23.8639 25.3335 24.3728 25.1227 24.748 24.7475C25.1232 24.3723 25.334 23.8634 25.334 23.3328C25.334 22.8022 25.1232 22.2933 24.748 21.9181C24.3728 21.5429 23.8639 21.3321 23.3333 21.3321C22.8027 21.3321 22.2938 21.5429 21.9186 21.9181C21.5434 22.2933 21.3326 22.8022 21.3326 23.3328C21.3326 23.8634 21.5434 24.3723 21.9186 24.7475C22.2938 25.1227 22.8027 25.3335 23.3333 25.3335ZM9.33331 23.3335C9.33331 23.0708 9.28158 22.8108 9.18107 22.5681C9.08056 22.3255 8.93324 22.105 8.74753 21.9193C8.56181 21.7335 8.34133 21.5862 8.09868 21.4857C7.85603 21.3852 7.59596 21.3335 7.33331 21.3335C7.07067 21.3335 6.8106 21.3852 6.56795 21.4857C6.32529 21.5862 6.10482 21.7335 5.9191 21.9193C5.73338 22.105 5.58606 22.3255 5.48555 22.5681C5.38504 22.8108 5.33331 23.0708 5.33331 23.3335C5.33331 23.8639 5.54403 24.3726 5.9191 24.7477C6.29417 25.1228 6.80288 25.3335 7.33331 25.3335C7.86375 25.3335 8.37245 25.1228 8.74753 24.7477C9.1226 24.3726 9.33331 23.8639 9.33331 23.3335Z" fill="black" fill-opacity="0.2"/>
      </svg>
   </div>
   <h2 class="feature-card__title">Free shipping</h2>
   <p class="feature-card__description">Lorem ipsum sit amet consectetur</p>
</article>


<!-- Para deixar o card em estado "disabled" adicione a classe 'disabled' na tag <article> -->
<article class="feature-card">
   <div class="feature-card__icon">
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M11.9533 24.0001C11.7948 25.1125 11.2403 26.1304 10.3916 26.8667C9.54284 27.6031 8.45694 28.0085 7.33331 28.0085C6.20969 28.0085 5.12379 27.6031 4.27507 26.8667C3.42636 26.1304 2.87182 25.1125 2.71331 24.0001H1.33331V8.00014C1.33331 7.64652 1.47379 7.30738 1.72384 7.05733C1.97389 6.80729 2.31302 6.66681 2.66665 6.66681H21.3333C21.6869 6.66681 22.0261 6.80729 22.2761 7.05733C22.5262 7.30738 22.6666 7.64652 22.6666 8.00014V10.6668H26.6666L30.6666 16.0748V24.0001H27.9533C27.7948 25.1125 27.2403 26.1304 26.3916 26.8667C25.5428 27.6031 24.4569 28.0085 23.3333 28.0085C22.2097 28.0085 21.1238 27.6031 20.2751 26.8667C19.4264 26.1304 18.8718 25.1125 18.7133 24.0001H11.9533ZM20 9.33348H3.99998V20.0668C4.52606 19.5297 5.17411 19.1277 5.88898 18.895C6.60385 18.6622 7.36437 18.6056 8.10582 18.73C8.84726 18.8544 9.54768 19.1561 10.1475 19.6093C10.7472 20.0626 11.2286 20.6541 11.5506 21.3335H19.116C19.34 20.8628 19.64 20.4348 20 20.0668V9.33348ZM22.6666 17.3335H28V16.9535L25.3226 13.3335H22.6666V17.3335ZM23.3333 25.3335C23.8639 25.3335 24.3728 25.1227 24.748 24.7475C25.1232 24.3723 25.334 23.8634 25.334 23.3328C25.334 22.8022 25.1232 22.2933 24.748 21.9181C24.3728 21.5429 23.8639 21.3321 23.3333 21.3321C22.8027 21.3321 22.2938 21.5429 21.9186 21.9181C21.5434 22.2933 21.3326 22.8022 21.3326 23.3328C21.3326 23.8634 21.5434 24.3723 21.9186 24.7475C22.2938 25.1227 22.8027 25.3335 23.3333 25.3335ZM9.33331 23.3335C9.33331 23.0708 9.28158 22.8108 9.18107 22.5681C9.08056 22.3255 8.93324 22.105 8.74753 21.9193C8.56181 21.7335 8.34133 21.5862 8.09868 21.4857C7.85603 21.3852 7.59596 21.3335 7.33331 21.3335C7.07067 21.3335 6.8106 21.3852 6.56795 21.4857C6.32529 21.5862 6.10482 21.7335 5.9191 21.9193C5.73338 22.105 5.58606 22.3255 5.48555 22.5681C5.38504 22.8108 5.33331 23.0708 5.33331 23.3335C5.33331 23.8639 5.54403 24.3726 5.9191 24.7477C6.29417 25.1228 6.80288 25.3335 7.33331 25.3335C7.86375 25.3335 8.37245 25.1228 8.74753 24.7477C9.1226 24.3726 9.33331 23.8639 9.33331 23.3335Z" fill="#2C2C2C"/>
         <path d="M11.9533 24.0001C11.7948 25.1125 11.2403 26.1304 10.3916 26.8667C9.54284 27.6031 8.45694 28.0085 7.33331 28.0085C6.20969 28.0085 5.12379 27.6031 4.27507 26.8667C3.42636 26.1304 2.87182 25.1125 2.71331 24.0001H1.33331V8.00014C1.33331 7.64652 1.47379 7.30738 1.72384 7.05733C1.97389 6.80729 2.31302 6.66681 2.66665 6.66681H21.3333C21.6869 6.66681 22.0261 6.80729 22.2761 7.05733C22.5262 7.30738 22.6666 7.64652 22.6666 8.00014V10.6668H26.6666L30.6666 16.0748V24.0001H27.9533C27.7948 25.1125 27.2403 26.1304 26.3916 26.8667C25.5428 27.6031 24.4569 28.0085 23.3333 28.0085C22.2097 28.0085 21.1238 27.6031 20.2751 26.8667C19.4264 26.1304 18.8718 25.1125 18.7133 24.0001H11.9533ZM20 9.33348H3.99998V20.0668C4.52606 19.5297 5.17411 19.1277 5.88898 18.895C6.60385 18.6622 7.36437 18.6056 8.10582 18.73C8.84726 18.8544 9.54768 19.1561 10.1475 19.6093C10.7472 20.0626 11.2286 20.6541 11.5506 21.3335H19.116C19.34 20.8628 19.64 20.4348 20 20.0668V9.33348ZM22.6666 17.3335H28V16.9535L25.3226 13.3335H22.6666V17.3335ZM23.3333 25.3335C23.8639 25.3335 24.3728 25.1227 24.748 24.7475C25.1232 24.3723 25.334 23.8634 25.334 23.3328C25.334 22.8022 25.1232 22.2933 24.748 21.9181C24.3728 21.5429 23.8639 21.3321 23.3333 21.3321C22.8027 21.3321 22.2938 21.5429 21.9186 21.9181C21.5434 22.2933 21.3326 22.8022 21.3326 23.3328C21.3326 23.8634 21.5434 24.3723 21.9186 24.7475C22.2938 25.1227 22.8027 25.3335 23.3333 25.3335ZM9.33331 23.3335C9.33331 23.0708 9.28158 22.8108 9.18107 22.5681C9.08056 22.3255 8.93324 22.105 8.74753 21.9193C8.56181 21.7335 8.34133 21.5862 8.09868 21.4857C7.85603 21.3852 7.59596 21.3335 7.33331 21.3335C7.07067 21.3335 6.8106 21.3852 6.56795 21.4857C6.32529 21.5862 6.10482 21.7335 5.9191 21.9193C5.73338 22.105 5.58606 22.3255 5.48555 22.5681C5.38504 22.8108 5.33331 23.0708 5.33331 23.3335C5.33331 23.8639 5.54403 24.3726 5.9191 24.7477C6.29417 25.1228 6.80288 25.3335 7.33331 25.3335C7.86375 25.3335 8.37245 25.1228 8.74753 24.7477C9.1226 24.3726 9.33331 23.8639 9.33331 23.3335Z" fill="black" fill-opacity="0.2"/>
      </svg>
   </div>
   <h2 class="feature-card__title">Free shipping</h2>
   <p class="feature-card__description">Lorem ipsum sit amet consectetur</p>
</article>

CSS

.feature-card {
  width: 160px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  position: relative;
}

.feature-card.disabled {
  cursor: not-allowed;
}

.feature-card__icon{
  width: 56px;
  height: 56px;
  border: 1px solid #E6E6E6;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.feature-card.disabled .feature-card__icon svg path{
  fill: #A7A7A7;
}

.feature-card__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  text-align: center;
  color: #2C2C2C;
}

.feature-card.disabled .feature-card__title {
  color: #8E8E8E;
} 

.feature-card__description{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  text-align: center;
  color: #757575;
}

.feature-card.disabled .feature-card__description {
  color: #A7A7A7;
}

Card de características com descrição e botão

Preview

HTML

<article class="feature-card">
   <div class="feature-card__icon">
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M11.9533 24.0001C11.7948 25.1125 11.2403 26.1304 10.3916 26.8667C9.54284 27.6031 8.45694 28.0085 7.33331 28.0085C6.20969 28.0085 5.12379 27.6031 4.27507 26.8667C3.42636 26.1304 2.87182 25.1125 2.71331 24.0001H1.33331V8.00014C1.33331 7.64652 1.47379 7.30738 1.72384 7.05733C1.97389 6.80729 2.31302 6.66681 2.66665 6.66681H21.3333C21.6869 6.66681 22.0261 6.80729 22.2761 7.05733C22.5262 7.30738 22.6666 7.64652 22.6666 8.00014V10.6668H26.6666L30.6666 16.0748V24.0001H27.9533C27.7948 25.1125 27.2403 26.1304 26.3916 26.8667C25.5428 27.6031 24.4569 28.0085 23.3333 28.0085C22.2097 28.0085 21.1238 27.6031 20.2751 26.8667C19.4264 26.1304 18.8718 25.1125 18.7133 24.0001H11.9533ZM20 9.33348H3.99998V20.0668C4.52606 19.5297 5.17411 19.1277 5.88898 18.895C6.60385 18.6622 7.36437 18.6056 8.10582 18.73C8.84726 18.8544 9.54768 19.1561 10.1475 19.6093C10.7472 20.0626 11.2286 20.6541 11.5506 21.3335H19.116C19.34 20.8628 19.64 20.4348 20 20.0668V9.33348ZM22.6666 17.3335H28V16.9535L25.3226 13.3335H22.6666V17.3335ZM23.3333 25.3335C23.8639 25.3335 24.3728 25.1227 24.748 24.7475C25.1232 24.3723 25.334 23.8634 25.334 23.3328C25.334 22.8022 25.1232 22.2933 24.748 21.9181C24.3728 21.5429 23.8639 21.3321 23.3333 21.3321C22.8027 21.3321 22.2938 21.5429 21.9186 21.9181C21.5434 22.2933 21.3326 22.8022 21.3326 23.3328C21.3326 23.8634 21.5434 24.3723 21.9186 24.7475C22.2938 25.1227 22.8027 25.3335 23.3333 25.3335ZM9.33331 23.3335C9.33331 23.0708 9.28158 22.8108 9.18107 22.5681C9.08056 22.3255 8.93324 22.105 8.74753 21.9193C8.56181 21.7335 8.34133 21.5862 8.09868 21.4857C7.85603 21.3852 7.59596 21.3335 7.33331 21.3335C7.07067 21.3335 6.8106 21.3852 6.56795 21.4857C6.32529 21.5862 6.10482 21.7335 5.9191 21.9193C5.73338 22.105 5.58606 22.3255 5.48555 22.5681C5.38504 22.8108 5.33331 23.0708 5.33331 23.3335C5.33331 23.8639 5.54403 24.3726 5.9191 24.7477C6.29417 25.1228 6.80288 25.3335 7.33331 25.3335C7.86375 25.3335 8.37245 25.1228 8.74753 24.7477C9.1226 24.3726 9.33331 23.8639 9.33331 23.3335Z" fill="#2C2C2C"/>
         <path d="M11.9533 24.0001C11.7948 25.1125 11.2403 26.1304 10.3916 26.8667C9.54284 27.6031 8.45694 28.0085 7.33331 28.0085C6.20969 28.0085 5.12379 27.6031 4.27507 26.8667C3.42636 26.1304 2.87182 25.1125 2.71331 24.0001H1.33331V8.00014C1.33331 7.64652 1.47379 7.30738 1.72384 7.05733C1.97389 6.80729 2.31302 6.66681 2.66665 6.66681H21.3333C21.6869 6.66681 22.0261 6.80729 22.2761 7.05733C22.5262 7.30738 22.6666 7.64652 22.6666 8.00014V10.6668H26.6666L30.6666 16.0748V24.0001H27.9533C27.7948 25.1125 27.2403 26.1304 26.3916 26.8667C25.5428 27.6031 24.4569 28.0085 23.3333 28.0085C22.2097 28.0085 21.1238 27.6031 20.2751 26.8667C19.4264 26.1304 18.8718 25.1125 18.7133 24.0001H11.9533ZM20 9.33348H3.99998V20.0668C4.52606 19.5297 5.17411 19.1277 5.88898 18.895C6.60385 18.6622 7.36437 18.6056 8.10582 18.73C8.84726 18.8544 9.54768 19.1561 10.1475 19.6093C10.7472 20.0626 11.2286 20.6541 11.5506 21.3335H19.116C19.34 20.8628 19.64 20.4348 20 20.0668V9.33348ZM22.6666 17.3335H28V16.9535L25.3226 13.3335H22.6666V17.3335ZM23.3333 25.3335C23.8639 25.3335 24.3728 25.1227 24.748 24.7475C25.1232 24.3723 25.334 23.8634 25.334 23.3328C25.334 22.8022 25.1232 22.2933 24.748 21.9181C24.3728 21.5429 23.8639 21.3321 23.3333 21.3321C22.8027 21.3321 22.2938 21.5429 21.9186 21.9181C21.5434 22.2933 21.3326 22.8022 21.3326 23.3328C21.3326 23.8634 21.5434 24.3723 21.9186 24.7475C22.2938 25.1227 22.8027 25.3335 23.3333 25.3335ZM9.33331 23.3335C9.33331 23.0708 9.28158 22.8108 9.18107 22.5681C9.08056 22.3255 8.93324 22.105 8.74753 21.9193C8.56181 21.7335 8.34133 21.5862 8.09868 21.4857C7.85603 21.3852 7.59596 21.3335 7.33331 21.3335C7.07067 21.3335 6.8106 21.3852 6.56795 21.4857C6.32529 21.5862 6.10482 21.7335 5.9191 21.9193C5.73338 22.105 5.58606 22.3255 5.48555 22.5681C5.38504 22.8108 5.33331 23.0708 5.33331 23.3335C5.33331 23.8639 5.54403 24.3726 5.9191 24.7477C6.29417 25.1228 6.80288 25.3335 7.33331 25.3335C7.86375 25.3335 8.37245 25.1228 8.74753 24.7477C9.1226 24.3726 9.33331 23.8639 9.33331 23.3335Z" fill="black" fill-opacity="0.2"/>
      </svg>
   </div>
   <h2 class="feature-card__title">Free shipping</h2>
   <p class="feature-card__description">Lorem ipsum sit amet consectetur</p>
   <a href="#" class="feature-card__button">
      <span>Read more</span>
   </a>
</article>



<!-- Para deixar o card em estado "disabled" adicione a classe 'disabled' na tag <article> -->
<article class="feature-card disabled">
   <div class="feature-card__icon">
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M11.9533 24.0001C11.7948 25.1125 11.2403 26.1304 10.3916 26.8667C9.54284 27.6031 8.45694 28.0085 7.33331 28.0085C6.20969 28.0085 5.12379 27.6031 4.27507 26.8667C3.42636 26.1304 2.87182 25.1125 2.71331 24.0001H1.33331V8.00014C1.33331 7.64652 1.47379 7.30738 1.72384 7.05733C1.97389 6.80729 2.31302 6.66681 2.66665 6.66681H21.3333C21.6869 6.66681 22.0261 6.80729 22.2761 7.05733C22.5262 7.30738 22.6666 7.64652 22.6666 8.00014V10.6668H26.6666L30.6666 16.0748V24.0001H27.9533C27.7948 25.1125 27.2403 26.1304 26.3916 26.8667C25.5428 27.6031 24.4569 28.0085 23.3333 28.0085C22.2097 28.0085 21.1238 27.6031 20.2751 26.8667C19.4264 26.1304 18.8718 25.1125 18.7133 24.0001H11.9533ZM20 9.33348H3.99998V20.0668C4.52606 19.5297 5.17411 19.1277 5.88898 18.895C6.60385 18.6622 7.36437 18.6056 8.10582 18.73C8.84726 18.8544 9.54768 19.1561 10.1475 19.6093C10.7472 20.0626 11.2286 20.6541 11.5506 21.3335H19.116C19.34 20.8628 19.64 20.4348 20 20.0668V9.33348ZM22.6666 17.3335H28V16.9535L25.3226 13.3335H22.6666V17.3335ZM23.3333 25.3335C23.8639 25.3335 24.3728 25.1227 24.748 24.7475C25.1232 24.3723 25.334 23.8634 25.334 23.3328C25.334 22.8022 25.1232 22.2933 24.748 21.9181C24.3728 21.5429 23.8639 21.3321 23.3333 21.3321C22.8027 21.3321 22.2938 21.5429 21.9186 21.9181C21.5434 22.2933 21.3326 22.8022 21.3326 23.3328C21.3326 23.8634 21.5434 24.3723 21.9186 24.7475C22.2938 25.1227 22.8027 25.3335 23.3333 25.3335ZM9.33331 23.3335C9.33331 23.0708 9.28158 22.8108 9.18107 22.5681C9.08056 22.3255 8.93324 22.105 8.74753 21.9193C8.56181 21.7335 8.34133 21.5862 8.09868 21.4857C7.85603 21.3852 7.59596 21.3335 7.33331 21.3335C7.07067 21.3335 6.8106 21.3852 6.56795 21.4857C6.32529 21.5862 6.10482 21.7335 5.9191 21.9193C5.73338 22.105 5.58606 22.3255 5.48555 22.5681C5.38504 22.8108 5.33331 23.0708 5.33331 23.3335C5.33331 23.8639 5.54403 24.3726 5.9191 24.7477C6.29417 25.1228 6.80288 25.3335 7.33331 25.3335C7.86375 25.3335 8.37245 25.1228 8.74753 24.7477C9.1226 24.3726 9.33331 23.8639 9.33331 23.3335Z" fill="#2C2C2C"/>
         <path d="M11.9533 24.0001C11.7948 25.1125 11.2403 26.1304 10.3916 26.8667C9.54284 27.6031 8.45694 28.0085 7.33331 28.0085C6.20969 28.0085 5.12379 27.6031 4.27507 26.8667C3.42636 26.1304 2.87182 25.1125 2.71331 24.0001H1.33331V8.00014C1.33331 7.64652 1.47379 7.30738 1.72384 7.05733C1.97389 6.80729 2.31302 6.66681 2.66665 6.66681H21.3333C21.6869 6.66681 22.0261 6.80729 22.2761 7.05733C22.5262 7.30738 22.6666 7.64652 22.6666 8.00014V10.6668H26.6666L30.6666 16.0748V24.0001H27.9533C27.7948 25.1125 27.2403 26.1304 26.3916 26.8667C25.5428 27.6031 24.4569 28.0085 23.3333 28.0085C22.2097 28.0085 21.1238 27.6031 20.2751 26.8667C19.4264 26.1304 18.8718 25.1125 18.7133 24.0001H11.9533ZM20 9.33348H3.99998V20.0668C4.52606 19.5297 5.17411 19.1277 5.88898 18.895C6.60385 18.6622 7.36437 18.6056 8.10582 18.73C8.84726 18.8544 9.54768 19.1561 10.1475 19.6093C10.7472 20.0626 11.2286 20.6541 11.5506 21.3335H19.116C19.34 20.8628 19.64 20.4348 20 20.0668V9.33348ZM22.6666 17.3335H28V16.9535L25.3226 13.3335H22.6666V17.3335ZM23.3333 25.3335C23.8639 25.3335 24.3728 25.1227 24.748 24.7475C25.1232 24.3723 25.334 23.8634 25.334 23.3328C25.334 22.8022 25.1232 22.2933 24.748 21.9181C24.3728 21.5429 23.8639 21.3321 23.3333 21.3321C22.8027 21.3321 22.2938 21.5429 21.9186 21.9181C21.5434 22.2933 21.3326 22.8022 21.3326 23.3328C21.3326 23.8634 21.5434 24.3723 21.9186 24.7475C22.2938 25.1227 22.8027 25.3335 23.3333 25.3335ZM9.33331 23.3335C9.33331 23.0708 9.28158 22.8108 9.18107 22.5681C9.08056 22.3255 8.93324 22.105 8.74753 21.9193C8.56181 21.7335 8.34133 21.5862 8.09868 21.4857C7.85603 21.3852 7.59596 21.3335 7.33331 21.3335C7.07067 21.3335 6.8106 21.3852 6.56795 21.4857C6.32529 21.5862 6.10482 21.7335 5.9191 21.9193C5.73338 22.105 5.58606 22.3255 5.48555 22.5681C5.38504 22.8108 5.33331 23.0708 5.33331 23.3335C5.33331 23.8639 5.54403 24.3726 5.9191 24.7477C6.29417 25.1228 6.80288 25.3335 7.33331 25.3335C7.86375 25.3335 8.37245 25.1228 8.74753 24.7477C9.1226 24.3726 9.33331 23.8639 9.33331 23.3335Z" fill="black" fill-opacity="0.2"/>
      </svg>
   </div>
   <h2 class="feature-card__title">Free shipping</h2>
   <p class="feature-card__description">Lorem ipsum sit amet consectetur</p>
   <a href="#" class="feature-card__button">
      <span>Read more</span>
   </a>
</article>

CSS

.feature-card {
  width: 160px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  position: relative;
}

.feature-card.disabled {
  cursor: not-allowed;
}

.feature-card__icon{
  width: 56px;
  height: 56px;
  border: 1px solid #E6E6E6;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.feature-card.disabled .feature-card__icon svg path{
  fill: #A7A7A7;
}

.feature-card__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  text-align: center;
  color: #2C2C2C;
}

.feature-card.disabled .feature-card__title {
  color: #8E8E8E;
} 

.feature-card__description{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  text-align: center;
  color: #757575;
}

.feature-card.disabled .feature-card__description {
  color: #A7A7A7;
}

.feature-card__button{
  margin: 8px auto 0px auto;
  width: fit-content;
  height: 32px;
  padding: 8px 20px;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-card.disabled .feature-card__button{
  cursor: not-allowed;
  pointer-events: none;
}

.feature-card__button span{
  font-size: 14px;
  font-weight: 500;
  color: #000000;
}

.feature-card.disabled .feature-card__button span{
  color: #A7A7A7;
}