Materializar tarjetas CSS

Posted on by Rudeus Greyrat

Las tarjetas son un medio conveniente para mostrar diferentes tipos de contenido relevante. Materialise utiliza tarjetas para presentar objetos similares cuyos tamaños y acciones se pueden cambiar según el requisito. Aquí hay un ejemplo de una tarjeta básica.

html

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h3>Basic card</h3>
        <div class="card green lighten-1">
            <div class="card-content black-text">
                <span class="card-title"></span>
                  
<p>This is a very simple card.
                  It is good at containing small 
                  information. This is convenient 
                  because It require little markup
                  to use effectively.</p>
  
            </div>
            <div class="card-action">
                <a href="#" 
                   class="white-text">Link</a>
                <a href="#" 
                   class="white-text">Link</a>
            </div>
        </div>
    </body>
</html>

Materialise proporciona diferentes tipos de tarjetas de acuerdo con sus requisitos, a continuación se enumeran los nombres:

  • Tarjeta de imagen : se utiliza para una tarjeta estándar con la ayuda de una imagen en miniatura. Para esta clase de imagen de tarjeta se agrega dentro de la clase de tarjeta.
  • FABs en tarjetas : dentro de la tarjeta de imagen, se pueden agregar botones de acción flotantes con diferentes tamaños.
  • Tarjetas horizontales : En este, el espacio se divide en dos bloques donde un lado se usa para la imagen y el otro para la información.
  • Revelar tarjetas : se utiliza para agregar información adicional a la que se puede acceder con un clic. Para que esto funcione,se agrega div de revelación de tarjeta con la clase de título de tarjeta de expansión y para abrir la revelación de tarjeta, se agrega la clase de activador  a un elemento dentro de la tarjeta.
  • Pestañas en Tarjetas : Esto se usa para agregar diferentes pestañas en la tarjeta. Para agregar esto, se agrega la clase cards-tabs entre el encabezado y el contenido de la pestaña.
  • Panel de tarjeta : se utiliza para una tarjeta simple que requiere un marcado mínimo con relleno y efecto de sombra.

Aquí hay un ejemplo que se muestra que usa todas las tarjetas anteriores:

Ejemplo:

html

<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons" 
              rel="stylesheet" />
  
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet"
              href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" />
  
        <script type="text/javascript" 
                src=
"https://code.jquery.com/jquery-2.1.1.min.js">
      </script>
  
        <!--Let browser know website is 
            optimized for mobile-->
        <meta name="viewport" 
              content="width=device-width,
                       initial-scale=1.0" />
    </head>
  
    <body>
        <div class="container">
            <h3>Basic card</h3>
            <div class="card green lighten-1">
                <div class="card-content black-text">
                    <span class="card-title">
                  </span>
                      
<p>This is a very simple card. 
                      It is good at containing small
                      information. This is convenient
                      because It require little markup
                      to use effectively.</p>
  
                </div>
                <div class="card-action">
                    <a href="#"
                       class="white-text">Link</a>
                    <a href="#" 
                       class="white-text">Link</a>
                </div>
            </div>
  
            <div class="divider black"></div>
            <h3>Image card with link</h3>
            <div class="card">
                <div class="card-image">
                    <img src="geeksforgeeks-6.png" 
                         alt="" />
                    <span class="card-title">
                  </span>
                </div>
                <div class="card-content">
                      
<p>This is a very simple card. 
                      It is good at containing small 
                      information.This is because It
                      require little markup to use 
                      effectively.</p>
  
                </div>
                <div class="card-action">
                    <a href="#" 
                       class="green-text">Link</a>
                </div>
            </div>
  
            <div class="divider black"></div>
  
            <div class="row">
                <h2>FABs in Cards</h2>
                <div class="col s12 m6">
                    <div class="card">
                        <div class="card-image">
                            <img src="download.png" />
                            <span class="card-title">
                              Card Title
                          </span>
                            <a class=
"btn-floating halfway-fab waves-effect waves-light red">
                              <i class="material-icons">
                                add</i></a>
                        </div>
                        <div class="card-content">
                              
<p>This is a very simple
                              card. It is good at 
                              containing small information.
                              This is because It require 
                              little markup to use effectively.
                          </p>
  
                        </div>
                    </div>
                </div>
                <div class="col s12 m6">
                    <div class="card">
                        <div class="card-image">
                            <img src="download.png" />
                            <span class="card-title">
                              Card Title</span>
                            <a class=
"btn-floating btn-large halfway-fab waves-effect waves-light red">
                              <i class="material-icons">add</i>
                          </a>
                        </div>
                        <div class="card-content">
                              
<p>This is a very simple card.
                              It is good at containing small 
                              information. This is because It 
                              require little markup to use 
                              effectively.</p>
  
                        </div>
                    </div>
                </div>
            </div>
  
            <div class="divider black"></div>
  
            <div class="col s12 m7">
                <h2 class="header">
                  Horizontal Card</h2>
                <div class="card horizontal">
                    <div class="card-image">
                        <img src="" />
                    </div>
                    <div class="card-stacked">
                        <div class="card-content">
                              
<p>This is a very simple card.
                              It is good at containing 
                              small information.</p>
  
                        </div>
                        <div class="card-action">
                            <a href="#" 
                               class="green-text">Link</a>
                        </div>
                    </div>
                </div>
            </div>
  
            <div class="divider black"></div>
  
            <h2>Card Reveal</h2>
            <div class="card">
                <div class=
"card-image waves-effect waves-block waves-light">
                    <img class="activator" 
                         src="office.jpg" />
                </div>
                <div class="card-content">
                    <span class=
"card-title activator grey-text text-darken-4">
                      Card Title
                      <i class="material-icons right">
                        more_vert</i></span>
                      
<p><a href="#" 
                          class="green-text">
                      Link</a></p>
  
                </div>
                <div class="card-reveal">
                    <span class=
                 "card-title grey-text text-darken-4">
                      Card Title
                      <i class="material-icons right">
                        close
                      </i></span>
                    <h5>Here is some more information that
                      will be only revealed once clicked on.
                  </h5>
                </div>
            </div>
  
            <div class="divider black"></div>
  
            <h2>Tabs in Cards</h2>
            <div class="card">
                <div class="card-content">
                      
<p>This is a very simple card. 
                      It is good at containing small 
                      information. This is because
                      It require little markup to use
                      effectively.</p>
  
                </div>
                <div class="card-tabs">
                    <ul class="tabs tabs-fixed-width">
                        <li class="tab">
                          <a class="active green-text"
                             href="#test4">Test 1</a>
                      </li>
                        <li class="tab">
                          <a href="#test5"
                             class="green-text">Test 2</a>
                      </li>
                        <li class="tab">
                          <a href="#test6" 
                             class="green-text">Test 3</a>
                      </li>
                    </ul>
                </div>
                <div class="card-content grey lighten-4">
                    <div id="test4"><h5>Test 1</h5></div>
                    <div id="test5"><h5>Test 2</h5></div>
                    <div id="test6"><h5>Test 3</h5></div>
                </div>
            </div>
  
            <div class="divider black"></div>
            <div class="divider black"></div>
            <br />
            <br />
            <br />
            <br />
        </div>
        <!-- Compiled and minified JavaScript -->
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
      </script>
    </body>
</html>

Tamaños de tarjeta

También podemos hacer tarjetas de tamaño uniforme utilizando las clases CSS de materialise.

i. pequeño: la «clase pequeña» se usa para hacer tarjetas de altura de hasta 300 px.

Sintaxis:

  <div class="card small">
    <!-- Card Content -->
  </div>

ii. medio: la «clase media» se utiliza para hacer tarjetas de altura de hasta 400 px.

Sintaxis:

  <div class="card medium">
    <!-- Card Content -->
  </div>

iii. grande: «La clase grande» se usa para hacer tarjetas de altura de hasta 500 px.

Sintaxis:

  <div class="card large">
    <!-- Card Content -->
  </div>

NOTA: 

  • También podemos definir alturas personalizadas para las tarjetas usando CSS.
  • Si no mencionamos ningún tamaño o clase de tarjeta, entonces la tarjeta obtiene la altura y el ancho predeterminados en automático, es decir, la altura y el ancho aumentan con el aumento del contenido.

Aquí hay un ejemplo de código que muestra diferentes tarjetas de diferentes tamaños:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" />
  
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
  
    <!--Let browser know website is 
            optimized for mobile-->
    <meta name="viewport" content="width=device-width,
                       initial-scale=1.0" />
</head>
  
<body>
    <div class="container">
        <h3>Card with Class Small </h3>
        <div class="card purple darken-3 small">
            <div class="card-content">
                <span class="card-title">
                </span>
                <p class="white-text">This is a very simple card.
                    It is good at containing small
                    information. This is convenient
                    because It require little markup
                    to use effectively.</p>
  
            </div>
            <div class="card-action">
                <a href="#" class="white-text">Link</a>
                <a href="#" class="white-text">Link</a>
            </div>
  
        </div>
    </div>
    <div class="container">
        <h3>Card with Class Medium</h3>
        <div class="card purple darken-3 medium">
            <div class="card-content">
                <span class="card-title">
                </span>
                <p class="white-text">This is a very simple card.
                    It is good at containing small
                    information. This is convenient
                    because It require little markup
                    to use effectively.</p>
  
            </div>
            <div class="card-action">
                <a href="#" class="white-text">Link</a>
                <a href="#" class="white-text">Link</a>
            </div>
  
        </div>
    </div>
    <div class="container">
        <h3>Card with Class Large</h3>
        <div class="card purple darken-3 large">
            <div class="card-content">
                <span class="card-title">
                </span>
                <p class="white-text">This is a very simple card.
                    It is good at containing small
                    information. This is convenient
                    because It require little markup
                    to use effectively.</p>
  
            </div>
            <div class="card-action">
                <a href="#" class="white-text">Link</a>
                <a href="#" class="white-text">Link</a>
            </div>
  
        </div>
    </div>
  
  
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
    </script>
</body>
  
</html>

Producción:

Tarjeta coloreada

También podemos hacer tarjetas de diferentes colores y también agregar diferentes colores de texto a la tarjeta usando diferentes colores de la paleta de colores de Materialise CSS . 

Sintaxis:

<div class="card purple darken-3">
<!-- Card Content -->
</div>

Ejemplo de código completo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" />
  
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
  
    <!--Let browser know website is 
            optimized for mobile-->
    <meta name="viewport" content="width=device-width,
                       initial-scale=1.0" />
</head>
  
<body>
    <div class="container">
        <h3>Basic card</h3>
        <div class="card purple darken-3">
            <div class="card-content">
                <span class="card-title">
                </span>
                <p class="white-text">This is a very simple card.
                    It is good at containing small
                    information. This is convenient
                    because It require little markup
                    to use effectively.</p>
  
            </div>
            <div class="card-action">
                <a href="#" class="white-text">Link</a>
                <a href="#" class="white-text">Link</a>
            </div>
        </div>
  
  
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
        </script>
</body>
  
</html>

Producción:

Navegadores compatibles:

  • Google Chrome
  • Navegadores valientes
  • Mozilla Firefox
  • Ópera
  • Safari
  • Borde de Microsoft

Publicación traducida automáticamente

Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *