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

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 Horizontal

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: Tarjeta con fab



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow