Ir ao contido da páxina

Moléculas

Alertas

Aviso importante: aberto o prazo de algo importante
Ir ao destino do aviso
Aviso importante: alerta con toda a superficie clicable
Ocorreu un erro: revisa os datos do formulario
Ir ao destino do aviso 
<div class="ml-alert">
    <div class="at-text">
        <strong>Aviso importante:</strong> aberto o prazo de algo importante
    </div>
    <a href="" class="alert-link"><span class="is-sr-only">Ir ao destino do aviso</span></a>
</div>

<div class="ml-alert is-clickable">
    <a href="" class="alert-link">
        <div class="at-text">
            <strong>Aviso importante:</strong> alerta con toda a superficie clicable
        </div>
    </a>
</div>

<div class="ml-alert is-error">
    <div class="at-text">
        <strong>Ocorreu un erro:</strong> revisa os datos do formulario
    </div>
    <a href="" class="alert-link"><span class="is-sr-only">Ir ao destino do aviso</span></a>
</div>

Alerta en pequeno, adxunta a outro contido ou nunha grella. O botón de acción é opcional.

Aviso

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.

Acción 
<div class="ml-alert is-attached">
    <h3 class="at-title">Aviso</h3>
    <div class="at-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
    </div>
    <a href="" class="at-button is-primary">Acción</a>
</div>

Filtros alfabéticos

<div class="ml-alphabetic-filter">
    <ul class="alphabetic-filter-letters-list">
        <li><a href="" class="at-alphabetic-filter-letter is-selected">A</a></li>
        <li><a href="" class="at-alphabetic-filter-letter">B</a></li>
        <li><a href="" class="at-alphabetic-filter-letter">C</a></li>
        <li><a href="" class="at-alphabetic-filter-letter">D</a></li>
        <li><a href="" class="at-alphabetic-filter-letter">E</a></li>
    </ul>
</div>

Autorías

Nome da autora

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.

<article class="ml-author">
    <div class="author-avatar-wrapper">
        <img src="https://picsum.photos/500/500" alt="">
    </div>
    <div class="author-content-wrapper">
        <h3 class="at-title">Nome da autora</h3>
        <div class="at-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
        </div>
        <ul class="author-contacts-list">
            <li><a href="">autora@info.net</a></li>
            <li><a href="">@autora</a></li>
        </ul>
    </div>
</article>

Banners

Os banners teñen un sistema de tallas e cores controlados a través de modificadores. Se un banner non ten que levar ligazón chega con non incluír a etiqueta <a> no marcado do compoñente.

Talla S

<article class="ml-banner is-s">
    <a href="" class="banner-link">
        <div class="banner-content-wrapper">
            <div class="banner-content">
                <h2 class="at-title">Banner S</h2>
            </div>
        </div>
    </a>
</article>

Talla M

<article class="ml-banner is-m">
    <a href="" class="banner-link">
        <div class="banner-content-wrapper">
            <div class="banner-content">
                <h2 class="at-title">Banner M</h2>
                <div class="at-text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
                </div>
            </div>
        </div>
    </a>
</article>

<article class="ml-banner is-m has-media">
    <a href="" class="banner-link">
        <div class="banner-media-wrapper">
            <img src="https://picsum.photos/700/394" alt="">
        </div>
        <div class="banner-content-wrapper">
            <div class="banner-content">
                <h2 class="at-title">Banner M</h2>
                <div class="at-text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
                </div>
            </div>
        </div>
    </a>
</article>

Talla L

<article class="ml-banner is-l">
    <a href="" class="banner-link">
        <div class="banner-content-wrapper">
            <div class="banner-content">
                <h2 class="at-title">
                    <span class="title-inner-wrapper">Banner L</span>
                </h2>
                <div class="at-text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
                </div>
            </div>
        </div>
    </a>
</article>

<article class="ml-banner is-l has-media">
    <a href="" class="banner-link">
        <div class="banner-background-overlay" style="background-image: url('https://picsum.photos/720/521');"></div>
        <div class="banner-content-wrapper">
            <div class="banner-content">
                <h2 class="at-title">
                    <span class="title-inner-wrapper">Banner L</span>
                </h2>
                <div class="at-text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
                </div>
            </div>
        </div>
    </a>
</article>

Talla XL

<article class="ml-banner is-xl">
    <a href="" class="banner-link">
        <div class="banner-content-wrapper">
            <div class="banner-content">
                <h2 class="at-title">
                    <span class="title-inner-wrapper">Banner XL</span>
                </h2>
                <div class="at-text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
                </div>
            </div>
        </div>
    </a>
</article>

<article class="ml-banner is-xl has-media">
    <a href="" class="banner-link">
        <div class="banner-background-overlay" style="background-image: url('https://picsum.photos/1180/427');"></div>
        <div class="banner-content-wrapper">
            <div class="banner-content">
                <h2 class="at-title">
                    <span class="title-inner-wrapper">Banner XL</span>
                </h2>
                <div class="at-text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
                </div>
            </div>
        </div>
    </a>
</article>

<article class="ml-banner is-xl has-media has-filter">
    <a href="" class="banner-link">
        <div class="banner-background-overlay" style="background-image: url('https://picsum.photos/1180/427');"></div>
        <div class="banner-content-wrapper">
            <div class="banner-content">
                <h2 class="at-title">
                    <span class="title-inner-wrapper">Banner XL</span>
                </h2>
                <div class="at-text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
                </div>
            </div>
        </div>
    </a>
</article>

<article class="ml-banner is-xl has-media has-video">
    <div class="banner-background-overlay" style="background-image: url('https://picsum.photos/1180/427');"></div>
    <usc-youtube-player video-id="xpljv2ZCv3c"></usc-youtube-player>
    <div class="banner-content-wrapper">
        <div class="banner-content">
            <h2 class="at-title">
                <span class="title-inner-wrapper">Banner XL</span>
            </h2>
            <div class="at-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
            </div>
            <a href="https://www.youtube.com/watch?v=xpljv2ZCv3c" class="banner-link">
                <span class="is-sr-only">Abrir ligazón</span>
            </a>
        </div>
    </div>
</article>

Listas de botóns

<ul class="ml-buttons-list">
    <li><a href="" class="at-button is-tertiary at-icon-external-link">Ligazón</a></li>
    <li><a href="" class="at-button is-tertiary at-icon-paperclip">Adxunto</a></li>
</ul>

<ul class="ml-buttons-list is-vertical">
    <li><a href="" class="at-button is-tertiary at-icon-external-link">Ligazón</a></li>
    <li><a href="" class="at-button is-tertiary at-icon-paperclip">Adxunto</a></li>
</ul>

Gráficos tipo donut

Se un gráfico non ten que levar ligazón chega con non incluír a etiqueta <a> no marcado do compoñente.

Título do dato 

<div class="ml-chart-doughnut">
    <h3 class="at-title">
        <a href="" class="chart-link">Título do dato</a>
    </h3>
    <div class="chart-canvas-wrapper">
        <usc-chart-doughnut
                :chart-data="[2, 2, 6]"
                :chart-data-labels="['Graos', 'Másteres', 'Estudantes']"
                :chart-data-colors="['#87a9c1', '#e1f4f1', '#000066']" />
    </div>
</div>

Eventos

Os eventos teñen un sistema de tallas e cores controlados a través de modificadores. O átomo coa data do evento é opcional.

Talla S

<article class="ml-event is-s">
    <div class="event-content-wrapper">
        <div class="date-title-wrapper">
            <time class="at-date" datetime="2019-04-01">01 abr</time>
            <h2 class="at-title">
                <a href="">Sumario dun contido de axenda talla S</a>
            </h2>
        </div>
    </div>
</article>

Talla M

<article class="ml-event is-m">
    <div class="event-content-wrapper">
        <div class="date-title-wrapper">
            <time datetime="2019-06-15" class="at-date">15 xuñ</time>
            <h2 class="at-title">
                <a href="">Sumario dun contido de axenda talla M</a>
            </h2>
            <div class="at-text">
                <p>Conferencia de Marcela Lorcarno</p>
            </div>
            <div class="event-location">
                <p>Facultade de Ciencias da Comunicación</p>
            </div>
        </div>
    </div>
</article>

<article class="ml-event is-m has-media">
    <div class="event-media-wrapper">
        <img src="https://picsum.photos/700/394" alt="">
    </div>
    <div class="event-content-wrapper">
        <div class="date-title-wrapper">
            <time datetime="2019-06-15" class="at-date">15 xuñ</time>
            <h2 class="at-title">
                <a href="">Sumario dun contido de axenda talla M</a>
            </h2>
            <div class="at-text">
                <p>Conferencia de Marcela Lorcarno</p>
            </div>
            <div class="event-location">
                <p>Facultade de Ciencias da Comunicación</p>
            </div>
        </div>
    </div>
</article>

Formularios

A cabeceira e os seus elementos son opcionais. Os formularios teñen unha clase modificadora is-horizontal para a súa visualización en horizontal.

Que queres estudar?

Título formulario

Descrición do formulario

<form class="ml-form">
    <header class="form-header">
        <h3 class="at-title">Que queres estudar?</h3>

        <h4 class="form-header-legend">Título formulario</h4>

        <p>Descrición do formulario</p>
    </header>
    <div class="form-content">
        <!-- Campos do formulario -->

        <div class="form-actions">
            <button type="submit" class="at-button is-primary">Enviar</button>
        </div>
    </div>
</form>

Datos

Os datos teñen un sistema de tallas controladas a través de modificadores. Se un dato non ten que levar ligazón chega con non incluír a etiqueta <a> no marcado do compoñente.

100.000

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

100.000

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="ml-metric is-m">
    <h3 class="at-title">
        <a href="" class="metric-link">100.000</a>
    </h3>
    <div class="at-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

<div class="ml-metric is-l">
    <h3 class="at-title">
        <a href="" class="metric-link">100.000</a>
    </h3>
    <div class="at-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Novas

As novas teñen un sistema de tallas e cores controlados a través de modificadores.

Talla M

Talla M

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.

Ler máis 
<article class="ml-news is-m">
    <div class="news-content-wrapper">
        <ul class="ml-tags-list">
            <li><a href="" class="at-tag is-primary">Tema</a></li>
            <li><a href="" class="at-tag is-secondary">Xénero</a></li>
        </ul>
        <h2 class="at-title">
            <a href="">Talla M</a>
        </h2>
        <div class="at-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
            <a href="" class="news-read-more">
                <span class="is-sr-only">Ler máis</span>
            </a>
        </div>
    </div>
</article>

<article class="ml-news is-m has-media ">
    <div class="news-media-wrapper">
        <img src="https://picsum.photos/700/394" alt="">
    </div>
    <div class="news-content-wrapper">
        <h2 class="at-title">
            <a href="">Talla M</a>
        </h2>
        <div class="at-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque.</p>
            <a href="/nova" class="news-read-more">
                <span class="is-sr-only">Ler máis</span>
            </a>
        </div>
    </div>
</article>

Talla L

Talla L

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.

Ler máis 
<article class="ml-news is-l" style="background-image: url('https://picsum.photos/720/521');">
    <div class="news-content-wrapper">
        <ul class="ml-tags-list">
            <li><a href="" class="at-tag is-primary">Tema</a></li>
            <li><a href="" class="at-tag is-secondary">Xénero</a></li>
        </ul>
        <h2 class="at-title">
            <a href="">Talla L</a>
        </h2>
        <div class="at-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
            <a href="" class="news-read-more">
                <span class="is-sr-only">Ler máis</span>
            </a>
        </div>
    </div>
</article>

<article class="ml-news is-l is-institutional" style="background-image: url('https://picsum.photos/1189/263');">
    <div class="news-content-wrapper">
        <ul class="ml-tags-list">
            <li><a href="" class="at-tag is-primary">Tema</a></li>
            <li><a href="" class="at-tag is-secondary">Xénero</a></li>
        </ul>
        <h2 class="at-title">
            <a href="">Talla L institucional</a>
        </h2>
        <div class="at-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
            <a href="" class="news-read-more">
                <span class="is-sr-only">Ler máis</span>
            </a>
        </div>
    </div>
</article>

Talla XL

Talla XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.

Ler máis 
<article class="ml-news is-xl" style="background-image: url('https://picsum.photos/1180/427');">
    <div class="news-content-wrapper">
        <ul class="ml-tags-list">
            <li><a href="" class="at-tag is-primary">Tema</a></li>
            <li><a href="" class="at-tag is-secondary">Xénero</a></li>
        </ul>
        <h2 class="at-title">
            <a href="">Talla XL</a>
        </h2>
        <div class="at-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
            <a href="" class="news-read-more">
                <span class="is-sr-only">Ler máis</span>
            </a>
        </div>
    </div>
</article>

Anuncios

A lista de descrición e a lista de etiquetas dun anuncio son opcionais.

Anuncio

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.

persoa@usc.es
Item 1
Lorem ipsum
Item 2
Lorem ipsum

Anuncio

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.

persoa@usc.es 
<article class="ml-notice">
    <div class="notice-content-wrapper">
        <h2 class="at-title">
            <a href="">Anuncio</a>
        </h2>
        <div class="at-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
        </div>
        <a href="" class="notice-author">persoa@usc.es</a>
        <dl class="at-desc-list">
            <dt>Item 1</dt>
            <dd>Lorem ipsum</dd>
            <dt>Item 2</dt>
            <dd>Lorem ipsum</dd>
        </dl>
        <ul class="ml-tags-list">
            <li><a href="" class="at-tag is-primary">Tema</a></li>
            <li><a href="" class="at-tag is-primary">Xénero</a></li>
        </ul>
    </div>
</article>

<article class="ml-notice is-attached">
    <div class="notice-content-wrapper">
        <h2 class="at-title">
            <a href="">Anuncio</a>
        </h2>
        <div class="at-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
        </div>
        <a href="" class="notice-author">persoa@usc.es</a>
    </div>
</article>

Cabeceira de páxina

A cabeceira de páxina é un compoñente Vue.js. As migas de pan, o antetítulo, o título, as etiquetas e o submenú son opcionais.

Título da páxina

 
<usc-page-header
    :has-title="true"
>
    <template v-slot:breadcrumb>
        <ol class="at-breadcrumb">
            <li class="breadcrumb-item"><a href="">Nivel 2</a></li>
            <li class="breadcrumb-item"><a href="">Nivel 3</a></li>
        </ol>
    </template>

    <template v-slot:pretitle>
        <p class="at-title is-pretitle">Antetítulo da páxina</p>
    </template>

    <h1 class="at-title">Título da páxina</h1>

    <template v-slot:tags>
        <ul class="ml-tags-list">
            <li>
                <span class="at-tag is-primary">Etiqueta 1</span>
                <a href="" class="at-tag is-secondary">Etiqueta 2</a>
            </li>
        </ul>
    </template>

    <template v-slot:submenu>
        <li class="submenu-item"><a href="">Submenú 1</a></li>
        <li class="submenu-item"><a href="">Submenú 2</a></li>
    </template>
</usc-page-header>

Resultados de busca

<article class="ml-search-result">
    <div class="search-result-content-wrapper">
        <h2 class="at-title">
            <a href="">Título do contido que coincide coa busca realizada</a>
        </h2>
        <div class="at-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris.</p>
        </div>
    </div>
</article>

Fichas técnicas

Ficha técnica

Item 1
Lorem ipsum
Item 2
Lorem ipsum
Item 3
Lorem ipsum dolor
Item 4
Lorem ipsum dolor sit
Item 5
Consectetur 
Adipiscing
<div class="ml-specs">
    <h2 class="at-title">Ficha técnica</h2>

    <dl class="at-desc-list">
        <dt>Item 1</dt>
        <dd>Lorem ipsum</dd>
        <dt>Item 2</dt>
        <dd>Lorem ipsum</dd>
        <dt>Item 3</dt>
        <dd>Lorem ipsum dolor</dd>
        <dt>Item 4</dt>
        <dd>Lorem ipsum dolor sit</dd>
        <dt>Item 5</dt>
        <dd>Consectetur 
Adipiscing</dd>
    </dl>
</div>

Táboas

Código Nome Créditos Programa
G3041101 Identidade cultural e sociedade da información 6.00 Descargar
G3041103 Fundamentos de economía da información 6.00 Descargar
G3041104 Institucións políticas e movementos sociais 6.00 Descargar 
<table class="ml-table">
    <thead>
        <tr>
            <th>Código</th>
            <th>Nome</th>
            <th>Créditos</th>
            <th>Programa</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>G3041101</td>
            <td>Identidade cultural e sociedade da información</td>
            <td>6.00</td>
            <td><a href="">Descargar<a/></td>
        </tr>

        <tr>
            <td>G3041103</td>
            <td>Fundamentos de economía da información</td>
            <td>6.00</td>
            <td><a href="">Descargar<a/></td>
        </tr>

        <tr>
            <td>G3041104</td>
            <td>Institucións políticas e movementos sociais</td>
            <td>6.00</td>
            <td><a href="">Descargar<a/></td>
        </tr>
    </tbody>
</table>

Listas de etiquetas

<ul class="ml-tags-list">
    <li>
        <a href="" class="at-tag is-primary">Tema</a>
    </li>
    <li>
        <a href="" class="at-tag is-secondary">Xénero</a>
    </li>
</ul>

Información de actualización

Os contidos desta páxina foron actualizados o 26/07/2019.

<div class="ml-version-info">
    <div class="version-info-content">
        <p>Os contidos desta páxina foron actualizados o 26/07/2019.</p>
    </div>
</div>

Carrusel de imaxes

Descrición da imaxe
Descrición da imaxe
Descrición da imaxe
 
<usc-carousel>
    <usc-carousel-item>
        <figure class="at-image">
            <img src="https://picsum.photos/800/507" alt="">
            <figcaption class="image-caption">Descrición da imaxe</figcaption>
        </figure>
    </usc-carousel-item>
    <usc-carousel-item>
        <figure class="at-image">
            <img src="https://picsum.photos/800/507" alt="">
            <figcaption class="image-caption">Descrición da imaxe</figcaption>
        </figure>
    </usc-carousel-item>
    <usc-carousel-item>
        <figure class="at-image">
            <img src="https://picsum.photos/800/507" alt="">
            <figcaption class="image-caption">Descrición da imaxe</figcaption>
        </figure>
    </usc-carousel-item>
</usc-carousel>

Se queremos que o carrusel de imaxes se poida ver a pantalla completa, é preciso modificar lixeiramente o seu marcado.

<usc-carousel>
    <template slot-scope="carouselSlotProps">
        <usc-carousel-item v-on:enlarge-carousel="carouselSlotProps.enlarge">
            <template slot-scope="itemSlotProps">
                <figure class="at-image">
                    <a href="https://picsum.photos/800/507" @click.prevent="itemSlotProps.enlargeCarousel">
                        <img src="https://picsum.photos/800/507" alt="">
                    </a>
                    <figcaption class="image-caption">Descrición da imaxe</figcaption>
                </figure>
            </template>
        </usc-carousel-item>
        <usc-carousel-item v-on:enlarge-carousel="carouselSlotProps.enlarge">
            <template slot-scope="itemSlotProps">
                <figure class="at-image">
                    <a href="https://picsum.photos/800/507" @click.prevent="itemSlotProps.enlargeCarousel">
                        <img src="https://picsum.photos/800/507" alt="">
                    </a>
                    <figcaption class="image-caption">Descrición da imaxe</figcaption>
                </figure>
            </template>
        </usc-carousel-item>
        <usc-carousel-item v-on:enlarge-carousel="carouselSlotProps.enlarge">
            <template slot-scope="itemSlotProps">
                <figure class="at-image">
                    <a href="https://picsum.photos/800/507" @click.prevent="itemSlotProps.enlargeCarousel">
                        <img src="https://picsum.photos/800/507" alt="">
                    </a>
                    <figcaption class="image-caption">Descrición da imaxe</figcaption>
                </figure>
            </template>
        </usc-carousel-item>
    </template>
</usc-carousel>

Grupo de filtros

<div class="ml-filters-group">
    <usc-text-filter></usc-text-filter>

    <usc-dropdown-filter>
        <template v-slot:default>
            <li>
                <a href="">Filtro 1</a>
            </li>
            <li>
                <a href="">Filtro 2</a>
            </li>
        </template>
    </usc-dropdown-filter>
</div>

Sumario xeral

<article class="ml-generic-summary">
    <i class="generic-summary-icon at-icon-paperclip"></i>
    <div class="generic-summary-content-wrapper">
        <h3 class="at-title">
            <a href="">Título do sumario</a>
        </h3>
        <div class="at-text">
            <p>Descrición do sumario</p>
        </div>
    </div>
</article>

Asignatura

<article class="ml-academic-subject">
    <h3 class="at-title">
        <a href="">Nome da asignatura</a>
    </h3>
    <ul class="academic-subject-specs-list">
        <li>0000-XXXX</li>
        <li>Carácter obrigatorio</li>
        <li>1SG</li>
        <li>6 Créditos</li>
        <li>Docencia Oferta 1</li>
    </ul>
</article>

Persoal da universidade

Nome do profesor/a

Coordinadora
Departamento
Bioquímica e Bioloxía
Área
Área
Teléfono
881 811 000 ext. 12211
Correo electrónico
info@espazo.gal
Categoría
Profesor/a: Catedrático/a de Universidade
<article class="ml-member">
    <div class="member-content-wrapper">
        <h3 class="at-title">Nome do profesor/a</h3>
        <span class="member-identifier">Coordinadora</span>

        <dl class="at-desc-list">
            <dt>Departamento</dt>
            <dd>Bioquímica e Bioloxía</dd>
            <dt>Área</dt>
            <dd>Área</dd>
            <dt>Teléfono</dt>
            <dd>
                <a href="">881 811 000 ext. 12211</a>
            </dd>
            <dt>Correo electrónico</dt>
            <dd>
                <a href="">info@espazo.gal</a>
            </dd>
            <dt>Categoría</dt>
            <dd>Profesor/a: Catedrático/a de Universidade</dd>
        </dl>
    </div>
</article>

<article class="ml-member has-position">
    <div class="member-content-wrapper">
        <span class="member-position">Cargo</span>
        <h3 class="at-title">Nome Apelido Apelido</h3>
        <span class="member-identifier">Identificador da persoa</span>

        <dl class="at-desc-list">
            <dt>Teléfonos</dt>
            <dd>
                <a href="">981 560 250</a><br />
                <a href="">881 956 418</a>
            </dd>
            <dt>Email</dt>
            <dd>
                <a href="">info@espazo.gal</a>
            </dd>
        </dl>
    </div>
</article>

<article class="ml-member has-position has-media">
    <div class="member-media-wrapper">
        <img src="https://picsum.photos/700/469" alt="">
    </div>

    <div class="member-content-wrapper">
        <span class="member-position">Cargo</span>
        <h3 class="at-title">Nome Apelido Apelido</h3>
        <span class="member-identifier">Identificador da persoa</span>

        <dl class="at-desc-list">
            <dt>Teléfonos</dt>
            <dd>
                <a href="">981 560 250</a><br />
                <a href="">881 956 418</a>
            </dd>
            <dt>Email</dt>
            <dd>
                <a href="">info@espazo.gal</a>
            </dd>
        </dl>
    </div>
</article>

Descrición emerxente (tooltip)

Un contido de exemplo

Contido importante da descrición emerxente

 
<usc-tooltip>
    <template v-slot:trigger="props">
        <button class="at-button is-mini at-icon-info tooltip-trigger" @click="props.toggle">
            <span class="is-sr-only">Info</span>
        </button>
    </template>

    <p>Un contido de exemplo</p>

    <div class="tooltip-important">
        <p>Contido importante da descrición emerxente</p>
    </div>
</usc-tooltip>
Loading…
Loading the web debug toolbar…
Attempt #