GEF
Menú

Tarjeta

Una tarjeta es un contenedor flexible, que puede contener imágenes, encabezados, textos, enlaces y otros contenidos, así como diversos fondos contextuales. Las tarjetas se pueden agrupar como una lista de tarjetas. Por ejemplo en el caso de tener que mostrar una serie de tarjetas de noticias de actualidad, las tarjetas irán dentro de una estructura UL / li no vía una serie de divs que simulen la lista de actualidad. También se debe tener en cuenta que en GEF la intención de generalizar es difícil dar la estructura correcta de encabezados, listas, imágenes o otras estructuras semánticas. Se debe tomar GEF como ejemplo pero variando los tags P, img, etc por sus tags adecuados. Por ejemplo en la tarjeta de submarca el texto podría ser un encabezado no un párrafo. En la tarjeta con pie los items podrían agruparse en una lista de tags. En alguna tarjeta quizás haya un título, vídeo, imagen, contenido y un pie. Para cada uno de estos elementos se ha de usar los tags html que representen correctamente su semántica. Se ha de añadir el texto de la imagen que corresponde o alt="" si es decorativa. Se ha de usar tag H para representar encabezados no solo clases h1,h2 en tags p. Vease que hay valores de atributos aria-label, title genéricos que se han de variar por el que se decida en cada implementación. Por ejemplo en todas las cards el aria-label del primer div se ha de añadir solo en caso necesario (se desea destacar una card de otra) tal como se indica en la card básica.

Contenido

Tarjeta básica

Las tarjetas necesitan de una serie de clases para funcionar. Estas clases se pueden añadir cuando sean necesarias en función del tipo de contenido, tamaño o estructura que se requiera.

Tarjeta básica

Ellentesque habitant morbi tristique senectus et netus

<div class="card card--column-order" role="region" aria-label="Texto descriptivo (atributo opcional)">
    <div class="card__contents">
        <p class="h3">Ellentesque habitant morbi tristique senectus et netus</p>
    </div>
</div>

Añadiendo un elemento cualquiera con clase .card__header podremos añadir una cabecera a la tarjeta deseada. La cabecera de las tarjetas pueden tener un icono .icon y un enlace .card__header__link a parte del texto que contienen.

La clase .font-alternate se puede aplicar a los títulos solo para Titulares, noticias o agenda.

Tarjeta con cabecera

Agenda

Totes les activitats

Ellentesque habitant morbi tristique senectus et netus

<div class="card" role="region" aria-label="Texto descriptivo(atributo opcional)">
    <div class="card__header">
        <h2 class="ruler ruler--primary">
            Agenda
            <span aria-hidden="true" class="icon icon--header icon--calendar float-right"></span>
        </h2>
        <span class="card__header__link col-xs-6">
            <a href="#" title="Texto descriptivo" id="card-content-2">Totes les activitats</a>
        </span>
    </div>
    <div class="card__contents ruler ruler--ri">
        <p class="h3" id="card-content-21">Ellentesque habitant morbi tristique senectus et netus</p>
    </div>
</div>

Tarjeta con imagen

Añadiendo un elemento div con clase .card__image podremos añadir una imagen a la tarjeta deseada. Las tarjetas con imagen por defecto en formato de columna

Si utilizamos la clase .card--column-order estaremos respetando el orden de lectura a nivel html, pero visualmente modificará el orden de la imagen y en contenido.

Tarjeta básica con imagen en posición vertical

Ellentesque habitant morbi tristique senectus et netus

Texto alternativo que funciona como encabezado de la card

Ellentesque habitant morbi tristique senectus et netus

Texto alternativo
<div class="card card--column-order" role="region" aria-label="Texto descriptivo(atributo opcional)">
    <div class="card__contents">
        <h3>Ellentesque habitant morbi tristique senectus et netus</h3>
    </div>
    <div class="img-wpr img-wpr--horizontal">
        <img class="img-wpr__cover" src="/assets/img/bg-img.jpg" alt="Texto alternativo que funciona como encabezado de la card">
    </div>

</div>

<div class="card" role="region" aria-label="Texto descriptivo">
    <div class="card__contents">
        <h3>Ellentesque habitant morbi tristique senectus et netus</h3>
    </div>
    <div class="img-wpr img-wpr--horizontal">
        <img class="img-wpr__cover" src="/assets/img/bg-img.jpg" alt="Texto alternativo">
    </div>
</div>

Las tarjetas básicas con imágenes en posición horizontal requieren el uso de la retícula para posicionar los elementos correctamente. Para ello están a disposición las clases .row, .col-md- y .col-xs- entre otras.

Tarjeta básica con imagen en posición horizontal

Ellentesque habitant morbi tristique senectus et netus

03/03/2016
Lorem ipsum
Texto alternativo

Ellentesque habitant morbi tristique senectus et netus

Texto alternativo
<div class="col-xs-12 col-md-12">
    <div class="card row card--image-horizontal card--with-footer inverse_order" role="region" aria-label="Texto descriptivo(atributo opcional)">
         <div class="card__contents col-xs-12 col-md-6 inverseheader">
             <p class="h3">Ellentesque habitant morbi tristique senectus et netus</p>
             <div class="card__footer">
                 <div class="float-left">03/03/2016</div>
                 <div class="float-right">Lorem ipsum</div>
             </div>
         </div>
         <div class="card__image col-xs-12 col-md-6">
             <img src="/assets/img/horiz_image.jpg" alt="Texto alternativo">
         </div>
    </div>
</div>
<div class="col-xs-12 col-md-12">
     <div class="card row card--image-horizontal" role="region" aria-label="Texto descriptivo">
         <div class="card__contents col-xs-12 col-md-6">
             <p class="h3">Ellentesque habitant morbi tristique senectus et netus</p>
         </div>
         <div class="card__image col-xs-12 col-md-6">
             <img src="/assets/img/vert_image.jpg" alt="Texto alternativo">
         </div>
     </div>
</div>

Tarjeta tipo submarca

Las tarjetas de submarca siempre deben llevar una de las siguientes clases que definen el color de la submarca.

Para poder aplicar los estilos correspondientes a cada submarca, se deberían emplear en los distintos elementos donde haya de ir un filete, las clases presentes en la sección filetes, así como una serie de clases que aplican el color de fondo correspondiente.

La lista de items del pie en ciertos casos se debe analizar si en vez de divs separados seria mejor una lista ul / li como una lista de tags.

A continuación se detalla la colección de clases:

.card--brand-corporate

.card--brand-x

.card--brand-ri

.card--brand-media

.card--brand-alumni

Tarjeta submarca

  • Nulla vel accumsan duiCorporate

  • Nulla vel accumsan duiUOC X

  • Nulla vel accumsan duiUOC R+I

  • Nulla vel accumsan duiUOC Media

  • Nulla vel accumsan duiUOC Alumni

<div class="card card--brand-corporate" role="region">
    <div class="card__contents">
        <p class="h3 card__sub-brand-title">
            Nulla vel accumsan dui
            <span class="visually-hidden">- empresa:&nbsp;</span>
            <strong>UOX Corporate</strong>
        </p>
    </div>
</div>

Variaciones de tamaño

Es posible controlar las dimensiones de las tarjetas usando una série de clases para controlar la altura. Para poder controlar la altura podemos usar una de las siguientes clases: .card--2y , .card--3y y .card--4y. En la guia de estilos solo se contempla la variación .card--2y.

Variaciones de tamaño

  • Ellentesque habitant morbi tristique senectus et netus

    Nulla facilisi. Praesent ullamcorper magna eget nunc vehicula, nec vestibulum diam aliquam. Duis malesuada bibendum fringilla.

  • Ellentesque habitant morbi tristique senectus et netus

    Nulla facilisi. Praesent ullamcorper magna eget nunc vehicula, nec vestibulum diam aliquam. Duis malesuada bibendum fringilla.

  • Ellentesque habitant morbi tristique senectus et netus

    Nulla facilisi. Praesent ullamcorper magna eget nunc vehicula, nec vestibulum diam aliquam. Duis malesuada bibendum fringilla.

<ul class="row">
    <li class="col-xs-12 col-md-4">
        <div class="card card--2y" role="region">
            <div class="card__contents" aria-describedby="card__contents16">
                <p class="h3">Ellentesque habitant morbi tristique senectus et netus</p>
                <p>Nulla facilisi. Praesent ullamcorper magna eget nunc vehicula, nec vestibulum diam aliquam. Duis malesuada bibendum fringilla.</p>
            </div>
        </div>
    </li>
</ul>

Tarjeta con enlace de bloque

Para que una card pueda ser utilizada como link, hemos de añadir la clase .card--with-link al elemento con clase .card y hemos de añadir un elemento span con clase absolute-link y atributo aria-hidden a true.

Tarjeta con enlace de bloque

Ellentesque habitant morbi tristique senectus et netus

Nulla facilisi. Praesent ullamcorper magna eget nunc vehicula, nec vestibulum diam aliquam. Duis malesuada bibendum fringilla.

<div class="card card--with-link">
    <div class="card__contents">
        <p class="card-title" id="card__contents19">
            <a class="card-title-link" href="#" title="Texto descriptivo">
                <span class="absolute-link" aria-hidden="true">
                </span>
                Ellentesque habitant morbi tristique senectus et netus
            </a>
        </p>
        <p>Nulla facilisi. Praesent ullamcorper magna eget nunc vehicula, nec vestibulum diam aliquam. Duis malesuada bibendum fringilla.</p>
    </div>
</div>

Las tarjetas con pie se componen de un elemento .card__contents y un .card__footer.

Tarjeta con pie

Ellentesque habitant morbi

<div class="card card--with-footer" role="region" >
    <div class="card__contents">
        <p class="h3" id="card__contents20">Ellentesque habitant morbi</p>
        <div class="card__footer" role="complementary">
            <div class="float-left"><p><span class="visually-hidden">Data:</span>03/03/2016</p></div>
            <div class="float-right">Lorem ipsum</div>
        </div>
    </div>
</div>

Tarjeta modo agenda

Las tarjetas modo agenda se componen de un div padre con clase .card__agenda y divs hijos con clase .card__contents para cada contenido.

Cuando se requiera mostrar un rango de fechas o la tarjeta de agenda es muy pequeña, se puede usar la clase .card__agenda__date--smaller para modificar el tamaño de la tipografía y mostrar correctamente la fecha.

Tarjeta tipo agenda

Habitant morbi tristique senectus et netus

Habitant morbi tristique senectus et netus

Habitant morbi tristique senectus et netus

Habitant morbi tristique senectus et netus

<div class="card ruler ruler--corporate card--brand-corporate row card__agenda" role="region">
    <div class="card__contents col-md-6 col-xs-12" aria-hidden="true">
        <div class="card__agenda__month">noviembre
            <div class="card__agenda__year">2016</div>
        </div>
        <div class="card__agenda__date card__agenda__date--smaller">28</div>
    </div>
    <div class="card card--col card--brand-default col-md-6 col-xs-12 card--no-margin card--with-footer">
        <div class="card__contents">
            <p class="h4 font-alternate">Habitant morbi tristique senectus et netus</p>
            <div class="card__footer" role="complementary">
                <div class="float-left"><span class="visually-hidden">Data: </span><p>28/09/2016</p></div>
                <div class="float-right">Lorem e Ipsum</div>
            </div>
        </div>
    </div>
</div>

Tarjeta modo vídeo

Para crear tarjetas que reproduzcan vídeos en un modal, se aplicará la clase .card__video al elemento .card_contents.

Existen algunas clases específicas de las tarjetas con vídeo como .card__video-time que estila la duración del video, .card__video-image que estila la imagen de fondo y .card__video-icon que estila el botón de reproducción.

Para el icono de play, se usan las siguientes clases: .icon--play y .icon--big.

Con el modificador de clase .img--tint añadirá un tinte azulado a la imagen de fondo.

Tarjeta con video que reproduce el video en un modal

Aliquam erat volutpat

Aliquam quis lacus fermentum, tempor massa eu, tincidunt ligula. Mauris eget ultrices lacus, ut tincidunt felis.

Texto alternativo
1:32
<div class="card card--with-footer" role="region">
    <div class="card__contents img-wpr img--tint">
        <div class="img-wpr__contents">
            <p class="h3 inverse">Aliquam erat volutpat</p>
        </div>
            <p class="inverse">Aliquam quis lacus fermentum, tempor massa eu, tincidunt ligula. Mauris eget ultrices lacus, ut tincidunt felis.</div>
        <img class="img-wpr__cover" src="..." alt="Texto alternativo" />
        <div class="card__footer">
            <div class="card__video-time">
                <span class="visually-hidden">Duración del video</span>1:32
            </div>
            <a class="card__video-icon icon icon--play icon--big" href="#modal-1" title="play-video" aria-label="play video en ventana modal" role="button" data-modal-trigger="" data-video-play=""></a>
        </div>
        <div class="modal modal--video" data-modal id="modal-1">
            <div class="modal__dialog" role="dialog" aria-labelledby="img-wpr__contents1" data-modal-dialog>
                <div class="modal__content">
                    <div class="modal__body">
                        <div class="embedded-video">
                            <div class="embedded-video__iframe" role="document" id="ytplayer1" data-video-id="qvHiV82-PuE" data-video-autoplay="1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Tarjeta con vídeo que se reproduce en un modal - ejemplo con tarjeta de texto

Texto alternativo de la imagen

1:32

Título del vídeo que se muestra

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
<div class="card row card--image-horizontal card--with-footer" role="region">
    <div class="card__contents col-md-8 col-xs-12 img-wpr img--tint">
        <h2><span class="visually-hidden">Título del vídeo que se muestra</span><img class="img-wpr__cover" src="/assets/img/bg-img.jpg" alt="Texto alternativo de la imagen"></h2>
        <div class="card__footer">
            <div class="card__video-time"><span class="visually-hidden">Duración del video</span>1:32</div>
            <a class="card__video-icon icon icon--play icon--big" href="#modal-1" title="play-video" aria-label="play video en ventana modal" role="button" data-modal-trigger="" data-video-play=""></a>
            </div>
        </div>
    <div class="card col-md-4 col-xs-12" role="region">
        <div class="card__contents" aria-describedby="card__contents23"><p class="h3">Título del vídeo que se muestra</p>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            <b class="quote">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</b>
            <div class="modal modal--video" data-modal="" id="modal-2">
                <div class="modal__dialog" role="dialog" aria-label="Texto descriptivo" data-modal-dialog="">
                    <div class="modal__content">
                        <div class="modal__body">
                            <div class="embedded-video">
                                <div class="embedded-video__iframe" role="document" id="ytplayer2" data-video-id="qvHiV82-PuE" data-video-autoplay="1"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Tarjetas con imagen de fondo

Las tarjetas también pueden tener una imagen de fondo añadiendo la clase .card__bg-image al elemento .card__contents y agregando la clase .card__bg-image__image al elemento img. Además con el modificador de clase .img--tint añadirá un tinte azulado a la imagen de fondo.

Tarjeta con imagen de fondo

Quisque ac mattis ipsum

Aliquam erat volutpat

Aliquam quis lacus fermentum, tempor massa eu, tincidunt ligula. Mauris eget ultrices lacus, ut tincidunt felis.

<div class="card" role="region">
    <div class="card__contents img-wpr img-wpr--horizontal">
        <img class="img-wpr__cover" src="..." alt="" />
        <div class="img-wpr__contents">
            <p class="h1 inverse">Quisque ac mattis ipsum</p>
            <p class="h2 inverse">Aliquam erat volutpat</p>
            <p class="inverse">Aliquam quis lacus fermentum, tempor massa eu, tincidunt ligula. Mauris eget ultrices lacus, ut tincidunt felis.</p>
        </div>
    </div>
</div>

Tarjetas con collapse

Las tarjetas con collapse son aquellas que contienen un desplegable. Añadiendo la clase .collapse dentro del contenido de la tarjeta, se consigue el efecto de texto desplegable.

Tarjetas con collapse. Primera versión

Ellentesque habitant morbi tristique senectus et netus

Nulla facilisi. Praesent ullamcorper magna eget nunc vehicula, nec vestibulum diam aliquam. Duis malesuada bibendum fringilla.

<div class="card" role="region" aria-label="Texto descriptivo(atributo opcional)">
    <div class="card__contents">
        <p class="h3" id="card__contents25">Ellentesque habitant morbi tristique senectus et netus</p>
        <p>Nulla facilisi. Praesent ullamcorper magna eget nunc vehicula, nec vestibulum diam aliquam. Duis malesuada bibendum fringilla.</p>
        <div class="collapse" data-collapse>
            <div class="collapse__content" data-collapse-content="" id="collapse__content1" aria-hidden="true">
                <div tabindex="-1" data-collapse-inner="">
                    <p id="collapse__content11">...</p>
                </div>
            </div>
            <a class="float-right" data-collapse-trigger="" href="#" aria-expanded="false" aria-controls="collapse__content1" aria-label="Mostrar más contenido" role="button">
                <span aria-hidden="true" class="icon icon--plus icon--before is-active-hidden"></span>
                <span aria-hidden="true" class="icon icon--plus icon--plus--rotate icon--before is-active-visible"></span>
            </a>
        </div>
    </div>
</div>

En esta versión de las tarjetas con collapse hacen un cambio de contenido a partir del atributo data-collapse-flipflap y la clase .collapse-flipflap__content. El contenido que permanece visible la primera vez está en el atributo data-collapse-flip y el contenido que hará desaparecer al primero está en el atributo data-collapse-flap.

Tarjetas con collapse. Segunda versión

Ellentesque habitant morbi tristique senectus et netus

Nulla facilisi. Praesent ullamcorper magna eget nunc vehicula, nec vestibulum diam aliquam. Duis malesuada bibendum fringilla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas lacinia dui non luctus feugiat. Mauris tincidunt gravida cursus. Aenean pellentesque eu massa et vestibulum. Aenean nulla purus, volutpat quis hendrerit sit amet, volutpat nec nisi. Mauris nec gravida urna, in sollicitudin mauris. Proin pulvinar nulla sit amet pretium varius. Cras bibendum sem eget turpis sagittis pulvinar.

<div class="card collapse-flipflap" role="region" data-collapse-flipflap aria-label="Texto descriptivo(atributo opcional)">
    <div class="card__contents collapse-flipflap__content">
        <p class="h3" id="card__contents26">Ellentesque habitant morbi tristique senectus et netus</p>
        <div class="collapse-flip" data-collapse-flip>
            <p>...</p>
        <div class="collapse-flap" data-collapse-flap="" id="collapse__content2">
            <p id="collapse__content22">...</p>
        </div>
            <a data-collapse-flipflap-trigger="" href="#" aria-expanded="false" aria-controls="collapse__content2">
                <span class="icon icon--plus icon--before is-active-hidden" aria-label="Mostrar contenido alternativo"></span>
                <span class="icon icon--plus icon--plus--rotate icon--before is-active-visible" aria-label="Mostrar contenido alternativo"></span>
            </a>
    </div>
</div>
Subir