Counter

Counter tamanho gigante com fundo transparente

Preview

HTML

<div class="counter">
   <span class="counter__qty">321</span>
</div>

CSS

.counter {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 40px;
   border: 1px solid #E6E6E6;
   padding: 0px 8px;
}

.counter .counter__qty {
   color: #2C2C2C;
   font-size: 20px;
   font-weight: 400;
   line-height: 28px;
}

Counter tamanho extra grande com fundo transparente

Preview

HTML

<div class="counter">
   <span class="counter__qty">321</span>
</div>

CSS

.counter {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 40px;
   border: 1px solid #E6E6E6;
   padding: 0px 8px;
}

.counter .counter__qty {
   color: #2C2C2C;
   font-size: 18px;
   font-weight: 400;
   line-height: 25px;
}

Counter tamanho grande com fundo transparente

Preview

HTML

<div class="counter">
   <span class="counter__qty">321</span>
</div>

CSS

.counter {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 40px;
   border: 1px solid #E6E6E6;
   padding: 0px 8px;
}

.counter .counter__qty {
   color: #2C2C2C;
   font-size: 16px;
   font-weight: 400;
   line-height: 22px;
}

Counter tamanho médio com fundo transparente

Preview

HTML

<div class="counter">
   <span class="counter__qty">321</span>
</div>

CSS

.counter {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 40px;
   border: 1px solid #E6E6E6;
   padding: 0px 8px;
}

.counter .counter__qty {
   color: #2C2C2C;
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
}

Counter tamanho pequeno com fundo transparente

Preview

HTML

<div class="counter">
   <span class="counter__qty">321</span>
</div>

CSS

.counter {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 40px;
   border: 1px solid #E6E6E6;
   padding: 0px 4px;
}

.counter .counter__qty {
   color: #2C2C2C;
   font-size: 12px;
   font-weight: 400;
   line-height: 17px;
}

Counter tamanho gigante com fundo colorido

Preview

HTML

<div class="counter">
   <span class="counter__qty">321</span>
</div>

CSS

.counter {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  padding: 0px 8px;
  background-color: #FF3939;
}

.counter .counter__qty {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

Counter tamanho extra grande com fundo colorido

Preview

HTML

<div class="counter">
   <span class="counter__qty">321</span>
</div>

CSS

.counter {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  padding: 0px 8px;
  background-color: #FF3939;
}

.counter .counter__qty {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
}

Counter tamanho grande com fundo colorido

Preview

HTML

<div class="counter">
   <span class="counter__qty">321</span>
</div>

CSS

.counter {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  padding: 0px 8px;
  background-color: #FF3939;
}

.counter .counter__qty {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

Counter tamanho médio com fundo colorido

Preview

HTML

<div class="counter">
   <span class="counter__qty">321</span>
</div>

CSS

.counter {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  padding: 0px 8px;
  background-color: #FF3939;
}

.counter .counter__qty {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

Counter tamanho pequeno com fundo colorido

Preview

HTML

<div class="counter">
   <span class="counter__qty">321</span>
</div>

CSS

.counter {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  padding: 0px 4px;
  background-color: #FF3939;
}

.counter .counter__qty {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}