Counter
Counter tamanho gigante com fundo transparente
- Preview
- HTML
- CSS
<div class="counter">
<span class="counter__qty">321</span>
</div>
.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
- CSS
<div class="counter">
<span class="counter__qty">321</span>
</div>
.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
- CSS
<div class="counter">
<span class="counter__qty">321</span>
</div>
.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
- CSS
<div class="counter">
<span class="counter__qty">321</span>
</div>
.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
- CSS
<div class="counter">
<span class="counter__qty">321</span>
</div>
.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
- CSS
<div class="counter">
<span class="counter__qty">321</span>
</div>
.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
- CSS
<div class="counter">
<span class="counter__qty">321</span>
</div>
.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
- CSS
<div class="counter">
<span class="counter__qty">321</span>
</div>
.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
- CSS
<div class="counter">
<span class="counter__qty">321</span>
</div>
.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
- CSS
<div class="counter">
<span class="counter__qty">321</span>
</div>
.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;
}