Produto
PRODUTO
Cards
Cards agrupam módulos de conteúdo de uma página — como a relação de disciplinas de um curso ou os conteúdos relacionados a uma disciplina. Funcionam sempre como trigger para um próximo nível de navegação, e por isso indicam de forma clara o conteúdo que será apresentado a partir de seu clique ou toque.
Título do cardTipos
Padrão
Título do card
Outlined
Título do card
Com vídeo 
05:35
Matéria
05:35
Matéria
Estados de interação
A variação de tamanho de um botão busca indicar tanto o seu peso hierárquico em uma página quanto tornar versátil a sua aplicação em diferentes contextos de composição de layout.
Card padrão
Normal
Título do card
Hover
Título do card
Focus
Título do card
Watched
Título do card
Card outlined
Normal
Título do card
Hover
Título do card
Focus
Título do card
Watched
Título do card
Card com vídeo
Normal
05:35
Matéria
05:35
Matéria
Hover
05:35
Matéria
05:35
Matéria
Focus
05:35
Matéria
05:35
Matéria
Card com imagem
Código
HTML 
Exibir código
Copiar código
Exibir código
<a href="#" class="card">
<span class="card-header">
Título do card
</span>
<span class="card-footer">
<i class="play-icon"></i> 1
</span>
</a>
SASS Exibir código
Copiar código
Exibir código
.card{
position: relative;
background-color: #3153f5;
border-radius: 4px;
display: inline-block;
color: #fff;
min-width: 220px;
max-width: 220px;
min-height: 122px;
box-sizing: border-box;
padding: 15px 20px 20px 20px;
font-family: Lato;
font-size: 1em;
font-weight: bold;
text-decoration: none!important;
border: 1px solid #3153f5;
border-bottom: 5px solid #3153f5;
transition: .4s;
&:not(.outlined):hover,
&:not(.outlined).hovered{
background-color: #1b68ff;
border-color: #1b68ff;
}
&:not(.outlined):focus,
&:not(.outlined).focused{
background-color: #0a51fb;
border-color: #0a51fb;
}
&:not(.outlined).watched{
background-color: #ebebeb;
border-color: #ebebeb;
color: #9b9b9b!important;
}
.card-icon{
width: 26px;
height: 36px;
float: right;
#icon, #mask{
transition: .4s;
}
}
.card-footer{
position: absolute;
bottom: 20px;
left: 20px;
.play-icon{
position: relative;
top: 3px;
margin-right: 5px;
display: inline-block;
background-image: url(/img/play.svg);
&.play-icon-watched{
background-image: url(/img/play-gray.svg);
}
background-size: 18px;
width: 18px;
height: 18px;
}
}
&.outlined{
background-color: #fff;
color: #3153f5;
.play-icon{
background-image: url(/img/play-blue.svg);
}
#icon, #mask{
fill:#3153f5;
}
&:hover,
&.hovered{
background-color: #1b68ff;
color: #fff;
.play-icon{
background-image: url(/img/play.svg);
}
#icon, #mask{
fill:#fff;
}
}
&:focus,
&.focused{
background-color: #0a51fb;
color: #fff;
.play-icon{
background-image: url(/img/play.svg);
}
#icon, #mask{
fill:#fff;
}
}
&.watched{
background-color: #fff;
border-color: #9b9b9b;
border-bottom-width: 1px;
color: #9b9b9b!important;
.play-icon{
background-image: url(/img/play-gray.svg);
}
}
}
&.watched{
pointer-events: none;
.watched-icon {
position: absolute;
width: 24px;
height: 24px;
border-radius: 15px;
background-color: #9b9b9b;
bottom: 20px;
right: 20px;
}
}
&.card-video, &.card-image{
max-width: 264px;
padding: 0;
background-color: #fff!important;
border: none;
&:hover,
&.hovered{
.card-footer{
color: #1b68ff;
}
}
&:focus,
&.focused{
.card-footer{
color: #0a51fb;
}
}
.card-icon {
width: 26px;
height: 36px;
float: right;
}
.card-video-bg,
.card-image-bg {
display: block;
position: relative;
border-radius: 4px 4px 0 0;
border: 1px solid #fff;
border-right: 0;
border-left: 0;
border-bottom: 0;
overflow: hidden;
img{
display: block;
width: 100%;
max-height: 137px;
}
&.overlay:before {
content: "";
background-color: rgba(49, 83, 245, 0.9);
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
z-index: 9;
}
&.overlay:after{
content: "";
background-color: #1b68ff;
z-index: 10;
width: 70%;
height: 5px;
left: 0;
bottom: 0;
position: absolute;
}
.video-time{
background-color: #1e2a54;
color: #fff;
position: absolute;
right: 7px;
bottom: 7px;
z-index: 11;
font-family: Lato;
font-size: 0.6em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: #ffffff;
padding: 2px 5px;
border-radius: 4px;
}
}
.card-header {
border-radius: 4px 4px 0 0;
display: block;
position: relative;
padding: 0;
.card-icon{
width: 21px;
height: 27px;
float: left;
margin-right: 10px;
}
.card-title {
position: absolute;
top: 0;
z-index: 10;
padding: 14px 20px;
line-height: 27px;
}
}
.card-footer {
position: relative;
float: left;
width: 100%;
left: inherit;
bottom: initial;
color: #000;
padding: 20px;
border: 1px solid #ccc;
border-top: 0;
box-sizing: border-box;
border-radius: 0 0 4px 4px;
font-size: 1em;
font-weight: bold;
letter-spacing: normal;
color: #1e2a54;
padding-bottom: 40px;
transition: .4s;
}
}
}
HTML Exibir código
Copiar código
Exibir código
<a href="#" class="card outlined">
<span class="card-header">
Título do card
<div class="card-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26px" height="36px" viewBox="0 0 79 100">
<defs>
<path id="a" d="M33.913 11.035c-7.98 7.982-13.155 18.51-13.83 29.78-.78 13.053 3.945 25.46 13.098 34.618 8.137 8.14 18.642 12.452 29.32 13.042v16.523H50.003a2.504 2.504 0 0 0 0 5.004H79.998a2.504 2.504 0 0 0 0-5.004H67.501V88.475c10.675-.59 21.182-4.905 29.32-13.042l1.767-1.768-10.712-10.72c5.192-6.148 8.007-14.392 6.86-23.29C93.006 26.245 82.1 15.413 68.678 13.8c-8.805-1.058-16.952 1.732-23.042 6.895L34.948 10l-1.035 1.035zm2.805 60.86c-7.555-7.557-11.717-17.605-11.717-28.292 0-9.85 3.535-19.158 10.002-26.476l7.098 7.106c-4.428 5.224-7.11 11.98-7.11 19.357 0 16.582 13.45 30.007 30 30.007 4.5 0 8.752-.972 12.575-2.747a29.162 29.162 0 0 0 6.785-4.357l7.112 7.117c-7.535 6.655-17.002 9.983-26.462 9.983h-.01c-10.24 0-20.478-3.898-28.273-11.698zm18.023-29.592V38.34h4.155c3.227 0 5.845-2.245 5.845-5.013v-2.49h2.5c5.207 0 9.435-3.997 9.907-9.082 7.655 4.283 12.843 12.465 12.843 21.835 0 5.777-1.95 11.082-5.25 15.305-.25.322-.535.615-.8.925-1.523-2.87-5.063-3.975-9.193-3.975h-.007v-4.99a5.01 5.01 0 0 0-5.013-5.012H58.276l-3.535-3.54zM39.993 43.59c0-2.695.44-5.293 1.235-7.725l13.513 13.512v6.475a4.992 4.992 0 0 0 4.99 4.995h5.01v7.75C51.09 68.474 39.993 57.32 39.993 43.59z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-20 -10)">
<path d="M0 0h120v120H0z"/>
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<use id="mask" fill="#fff" xlink:href="#a"/>
<g id="icon" fill="#fff" mask="url(#b)">
<path d="M0 0h120v120H0z"/>
</g>
</g>
</svg>
</div>
</span>
<span class="card-footer">
<i class="play-icon"></i> 1
</span>
</a>
SASS Exibir código
Copiar código
Exibir código
.card{
position: relative;
background-color: #3153f5;
border-radius: 4px;
display: inline-block;
color: #fff;
min-width: 220px;
max-width: 220px;
min-height: 122px;
box-sizing: border-box;
padding: 15px 20px 20px 20px;
font-family: Lato;
font-size: 1em;
font-weight: bold;
text-decoration: none!important;
border: 1px solid #3153f5;
border-bottom: 5px solid #3153f5;
transition: .4s;
&:not(.outlined):hover,
&:not(.outlined).hovered{
background-color: #1b68ff;
border-color: #1b68ff;
}
&:not(.outlined):focus,
&:not(.outlined).focused{
background-color: #0a51fb;
border-color: #0a51fb;
}
&:not(.outlined).watched{
background-color: #ebebeb;
border-color: #ebebeb;
color: #9b9b9b!important;
}
.card-icon{
width: 26px;
height: 36px;
float: right;
#icon, #mask{
transition: .4s;
}
}
.card-footer{
position: absolute;
bottom: 20px;
left: 20px;
.play-icon{
position: relative;
top: 3px;
margin-right: 5px;
display: inline-block;
background-image: url(/img/play.svg);
&.play-icon-watched{
background-image: url(/img/play-gray.svg);
}
background-size: 18px;
width: 18px;
height: 18px;
}
}
&.outlined{
background-color: #fff;
color: #3153f5;
.play-icon{
background-image: url(/img/play-blue.svg);
}
#icon, #mask{
fill:#3153f5;
}
&:hover,
&.hovered{
background-color: #1b68ff;
color: #fff;
.play-icon{
background-image: url(/img/play.svg);
}
#icon, #mask{
fill:#fff;
}
}
&:focus,
&.focused{
background-color: #0a51fb;
color: #fff;
.play-icon{
background-image: url(/img/play.svg);
}
#icon, #mask{
fill:#fff;
}
}
&.watched{
background-color: #fff;
border-color: #9b9b9b;
border-bottom-width: 1px;
color: #9b9b9b!important;
.play-icon{
background-image: url(/img/play-gray.svg);
}
}
}
&.watched{
pointer-events: none;
.watched-icon {
position: absolute;
width: 24px;
height: 24px;
border-radius: 15px;
background-color: #9b9b9b;
bottom: 20px;
right: 20px;
}
}
&.card-video, &.card-image{
max-width: 264px;
padding: 0;
background-color: #fff!important;
border: none;
&:hover,
&.hovered{
.card-footer{
color: #1b68ff;
}
}
&:focus,
&.focused{
.card-footer{
color: #0a51fb;
}
}
.card-icon {
width: 26px;
height: 36px;
float: right;
}
.card-video-bg,
.card-image-bg {
display: block;
position: relative;
border-radius: 4px 4px 0 0;
border: 1px solid #fff;
border-right: 0;
border-left: 0;
border-bottom: 0;
overflow: hidden;
img{
display: block;
width: 100%;
max-height: 137px;
}
&.overlay:before {
content: "";
background-color: rgba(49, 83, 245, 0.9);
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
z-index: 9;
}
&.overlay:after{
content: "";
background-color: #1b68ff;
z-index: 10;
width: 70%;
height: 5px;
left: 0;
bottom: 0;
position: absolute;
}
.video-time{
background-color: #1e2a54;
color: #fff;
position: absolute;
right: 7px;
bottom: 7px;
z-index: 11;
font-family: Lato;
font-size: 0.6em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: #ffffff;
padding: 2px 5px;
border-radius: 4px;
}
}
.card-header {
border-radius: 4px 4px 0 0;
display: block;
position: relative;
padding: 0;
.card-icon{
width: 21px;
height: 27px;
float: left;
margin-right: 10px;
}
.card-title {
position: absolute;
top: 0;
z-index: 10;
padding: 14px 20px;
line-height: 27px;
}
}
.card-footer {
position: relative;
float: left;
width: 100%;
left: inherit;
bottom: initial;
color: #000;
padding: 20px;
border: 1px solid #ccc;
border-top: 0;
box-sizing: border-box;
border-radius: 0 0 4px 4px;
font-size: 1em;
font-weight: bold;
letter-spacing: normal;
color: #1e2a54;
padding-bottom: 40px;
transition: .4s;
}
}
}
HTML Exibir código
Copiar código
Exibir código
<a href="#" class="card card-video video">
<div class="card-header">
<div class="card-video-bg overlay">
<img src="/img/video-example.png" />
<span class="video-time">
05:35
</span>
</div>
<span class="card-title">
<img src="/img/icon-3-white.svg" class="card-icon" />
Matéria
</span>
</div>
<span class="card-footer">
Título
</span>
</a>
SASS Exibir código
Copiar código
Exibir código
.card{
position: relative;
background-color: #3153f5;
border-radius: 4px;
display: inline-block;
color: #fff;
min-width: 220px;
max-width: 220px;
min-height: 122px;
box-sizing: border-box;
padding: 15px 20px 20px 20px;
font-family: Lato;
font-size: 1em;
font-weight: bold;
text-decoration: none!important;
border: 1px solid #3153f5;
border-bottom: 5px solid #3153f5;
transition: .4s;
&:not(.outlined):hover,
&:not(.outlined).hovered{
background-color: #1b68ff;
border-color: #1b68ff;
}
&:not(.outlined):focus,
&:not(.outlined).focused{
background-color: #0a51fb;
border-color: #0a51fb;
}
&:not(.outlined).watched{
background-color: #ebebeb;
border-color: #ebebeb;
color: #9b9b9b!important;
}
.card-icon{
width: 26px;
height: 36px;
float: right;
#icon, #mask{
transition: .4s;
}
}
.card-footer{
position: absolute;
bottom: 20px;
left: 20px;
.play-icon{
position: relative;
top: 3px;
margin-right: 5px;
display: inline-block;
background-image: url(/img/play.svg);
&.play-icon-watched{
background-image: url(/img/play-gray.svg);
}
background-size: 18px;
width: 18px;
height: 18px;
}
}
&.outlined{
background-color: #fff;
color: #3153f5;
.play-icon{
background-image: url(/img/play-blue.svg);
}
#icon, #mask{
fill:#3153f5;
}
&:hover,
&.hovered{
background-color: #1b68ff;
color: #fff;
.play-icon{
background-image: url(/img/play.svg);
}
#icon, #mask{
fill:#fff;
}
}
&:focus,
&.focused{
background-color: #0a51fb;
color: #fff;
.play-icon{
background-image: url(/img/play.svg);
}
#icon, #mask{
fill:#fff;
}
}
&.watched{
background-color: #fff;
border-color: #9b9b9b;
border-bottom-width: 1px;
color: #9b9b9b!important;
.play-icon{
background-image: url(/img/play-gray.svg);
}
}
}
&.watched{
pointer-events: none;
.watched-icon {
position: absolute;
width: 24px;
height: 24px;
border-radius: 15px;
background-color: #9b9b9b;
bottom: 20px;
right: 20px;
}
}
&.card-video, &.card-image{
max-width: 264px;
padding: 0;
background-color: #fff!important;
border: none;
&:hover,
&.hovered{
.card-footer{
color: #1b68ff;
}
}
&:focus,
&.focused{
.card-footer{
color: #0a51fb;
}
}
.card-icon {
width: 26px;
height: 36px;
float: right;
}
.card-video-bg,
.card-image-bg {
display: block;
position: relative;
border-radius: 4px 4px 0 0;
border: 1px solid #fff;
border-right: 0;
border-left: 0;
border-bottom: 0;
overflow: hidden;
img{
display: block;
width: 100%;
max-height: 137px;
}
&.overlay:before {
content: "";
background-color: rgba(49, 83, 245, 0.9);
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
z-index: 9;
}
&.overlay:after{
content: "";
background-color: #1b68ff;
z-index: 10;
width: 70%;
height: 5px;
left: 0;
bottom: 0;
position: absolute;
}
.video-time{
background-color: #1e2a54;
color: #fff;
position: absolute;
right: 7px;
bottom: 7px;
z-index: 11;
font-family: Lato;
font-size: 0.6em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: #ffffff;
padding: 2px 5px;
border-radius: 4px;
}
}
.card-header {
border-radius: 4px 4px 0 0;
display: block;
position: relative;
padding: 0;
.card-icon{
width: 21px;
height: 27px;
float: left;
margin-right: 10px;
}
.card-title {
position: absolute;
top: 0;
z-index: 10;
padding: 14px 20px;
line-height: 27px;
}
}
.card-footer {
position: relative;
float: left;
width: 100%;
left: inherit;
bottom: initial;
color: #000;
padding: 20px;
border: 1px solid #ccc;
border-top: 0;
box-sizing: border-box;
border-radius: 0 0 4px 4px;
font-size: 1em;
font-weight: bold;
letter-spacing: normal;
color: #1e2a54;
padding-bottom: 40px;
transition: .4s;
}
}
}
HTML Exibir código
Copiar código
Exibir código
<a href="#" class="card card-image">
<div class="card-header">
<div class="card-image-bg">
<img src="/img/video-placeholder.png" />
</div>
</div>
<span class="card-footer">
Título
</span>
</a>
SASS Exibir código
Copiar código
Exibir código
.card{
position: relative;
background-color: #3153f5;
border-radius: 4px;
display: inline-block;
color: #fff;
min-width: 220px;
max-width: 220px;
min-height: 122px;
box-sizing: border-box;
padding: 15px 20px 20px 20px;
font-family: Lato;
font-size: 1em;
font-weight: bold;
text-decoration: none!important;
border: 1px solid #3153f5;
border-bottom: 5px solid #3153f5;
transition: .4s;
&:not(.outlined):hover,
&:not(.outlined).hovered{
background-color: #1b68ff;
border-color: #1b68ff;
}
&:not(.outlined):focus,
&:not(.outlined).focused{
background-color: #0a51fb;
border-color: #0a51fb;
}
&:not(.outlined).watched{
background-color: #ebebeb;
border-color: #ebebeb;
color: #9b9b9b!important;
}
.card-icon{
width: 26px;
height: 36px;
float: right;
#icon, #mask{
transition: .4s;
}
}
.card-footer{
position: absolute;
bottom: 20px;
left: 20px;
.play-icon{
position: relative;
top: 3px;
margin-right: 5px;
display: inline-block;
background-image: url(/img/play.svg);
&.play-icon-watched{
background-image: url(/img/play-gray.svg);
}
background-size: 18px;
width: 18px;
height: 18px;
}
}
&.outlined{
background-color: #fff;
color: #3153f5;
.play-icon{
background-image: url(/img/play-blue.svg);
}
#icon, #mask{
fill:#3153f5;
}
&:hover,
&.hovered{
background-color: #1b68ff;
color: #fff;
.play-icon{
background-image: url(/img/play.svg);
}
#icon, #mask{
fill:#fff;
}
}
&:focus,
&.focused{
background-color: #0a51fb;
color: #fff;
.play-icon{
background-image: url(/img/play.svg);
}
#icon, #mask{
fill:#fff;
}
}
&.watched{
background-color: #fff;
border-color: #9b9b9b;
border-bottom-width: 1px;
color: #9b9b9b!important;
.play-icon{
background-image: url(/img/play-gray.svg);
}
}
}
&.watched{
pointer-events: none;
.watched-icon {
position: absolute;
width: 24px;
height: 24px;
border-radius: 15px;
background-color: #9b9b9b;
bottom: 20px;
right: 20px;
}
}
&.card-video, &.card-image{
max-width: 264px;
padding: 0;
background-color: #fff!important;
border: none;
&:hover,
&.hovered{
.card-footer{
color: #1b68ff;
}
}
&:focus,
&.focused{
.card-footer{
color: #0a51fb;
}
}
.card-icon {
width: 26px;
height: 36px;
float: right;
}
.card-video-bg,
.card-image-bg {
display: block;
position: relative;
border-radius: 4px 4px 0 0;
border: 1px solid #fff;
border-right: 0;
border-left: 0;
border-bottom: 0;
overflow: hidden;
img{
display: block;
width: 100%;
max-height: 137px;
}
&.overlay:before {
content: "";
background-color: rgba(49, 83, 245, 0.9);
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
z-index: 9;
}
&.overlay:after{
content: "";
background-color: #1b68ff;
z-index: 10;
width: 70%;
height: 5px;
left: 0;
bottom: 0;
position: absolute;
}
.video-time{
background-color: #1e2a54;
color: #fff;
position: absolute;
right: 7px;
bottom: 7px;
z-index: 11;
font-family: Lato;
font-size: 0.6em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: #ffffff;
padding: 2px 5px;
border-radius: 4px;
}
}
.card-header {
border-radius: 4px 4px 0 0;
display: block;
position: relative;
padding: 0;
.card-icon{
width: 21px;
height: 27px;
float: left;
margin-right: 10px;
}
.card-title {
position: absolute;
top: 0;
z-index: 10;
padding: 14px 20px;
line-height: 27px;
}
}
.card-footer {
position: relative;
float: left;
width: 100%;
left: inherit;
bottom: initial;
color: #000;
padding: 20px;
border: 1px solid #ccc;
border-top: 0;
box-sizing: border-box;
border-radius: 0 0 4px 4px;
font-size: 1em;
font-weight: bold;
letter-spacing: normal;
color: #1e2a54;
padding-bottom: 40px;
transition: .4s;
}
}
}