materializecss
Tarjetas
Buscar..
Introducción
Las tarjetas son una parte vital del marco Materialise CSS, proporcionan un enfoque semántico y hermoso para mostrar contenido de una manera comprensible.
Sintaxis
- Una carta basica
- Creando una carta horizontal
- Añadiendo un botón de acción flotante a medias.
- Revelación de la tarjeta
- Pestañas en tarjetas
- Diferentes tamaños de tarjeta
- Panel de tarjetas
Tarjeta basica
<div class="container">
<div class="row">
<div class="col s6">
<div class="card">
<div class="card-image"> <!-- Card Image -->
<img src="image.png" alt="Image">
</div>
<div class="card-content"> <!-- Card Content -->
<h3>This is a card</h3>
<p class="flow-text">Cards are really cool for conveying information in a beautiful way.</p>
</div>
<div class="card-action"> <!-- Card Action -->
<a href="#" class="btn orange">Read More</a>
</div>
</div>
</div>
</div>
</div>
Importante:
- Utilice
.card
como el elemento que rodea principal. - Imágenes envolventes con
.card-image
- Contenido envolvente con
.card-content
- Botones de acción envolvente con
.card-action
Esto es lo que parece:
Tarjeta Horizontal
<div class="container">
<div class="row">
<div class="col s12">
<div class="card horizontal">
<div class="card-image"><img src="image.png"></div>
<div class="card-stacked">
<div class="card-content">
<h3>This is a card</h3>
<p class="flow-text">Cards are really cool for conveying information in a beautiful way.</p>
</div>
<div class="card-action"><a href="#" class="btn orange">Read More</a></div>
</div>
</div>
</div>
</div>
</div>
Importante:
- Añadir
.horizontal
al elemento de la carta. -
.card-content
y.card-action
con un div con.card-stacked
Esto es lo que parece:
Tarjeta con un botón de acción flotante (FAB)
<div class="container">
<div class="row">
<div class="col s5">
<div class="card">
<div class="card-image">
<img src="image.png">
<a href="#" class="btn-floating halfway-fab orange btn-large"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<h3>This is a card</h3>
<p class="flow-text">Cards are really cool for conveying information in a beautiful way.</p>
</div>
</div>
</div>
</div>
</div>
Importante:
- Coloque una
a.btn-floating.halfway-fab
dentro del contenedor.card-image
.
Esto es lo que parece:
Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow