Ir ao contido da páxina

Átomos

Migas de pan

Serven para indicar a localización da páxina actual na xerarquía de navegación.

<nav>
    <ol class="at-breadcrumb">
        <li class="breadcrumb-item">
            <a href="">Nivel 1</a>
        </li>
        <li class="breadcrumb-item">
            <a href="">Nivel 2</a>
        </li>
    </ol>
</nav>

Botóns

Inclúense diferentes estilos de botóns. Poden usarse tanto con <button> coma con <a>.

Botón secundario Botón con icona 

<button type="button" class="at-button is-primary">Botón</button>
<a href="" class="at-button is-secondary">Botón secundario</a>
<a href="" class="at-button is-tertiary at-icon-image">Botón con icona</a>

Listas de descrición

Tipo
Presencial
Área
Ciencias Sociais e Xurídicas
<dl class="at-desc-list">
    <dt>Tipo</dt>
    <dd>Presencial</dd>
    <dt>Área</dt>
    <dd>Ciencias Sociais e Xurídicas</dd>
</dl>

Embeds

Para a visualización de contidos embebidos con comportamento responsive. É necesario empregar un modificador en función do ratio de aspecto do elementos entres os dispoñibles: is-21by9, is-16by9, is-4by3 ou is-1by1. A lenda é opcional.

Este é un vídeo embebido cunha proporción 16:9
<figure class="at-embed is-16by9">
    <div class="embed-wrapper">
        <iframe src="https://www.youtube.com/embed/xpljv2ZCv3c" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" width="560" height="315" frameborder="0"></iframe>
    </div>
    <figcaption class="embed-caption">Este é un vídeo embebido cunha proporción 16:9</figcaption>
</figure>

Iconas

Inclúese unha fonte de iconas propia.

at-icon-facebook
at-icon-twitter
at-icon-whatsapp
at-icon-instagram
at-icon-intranet
at-icon-researchgate
at-icon-orcid
at-icon-linkedin
at-icon-google
at-icon-microsoft
at-icon-pinterest
at-icon-tv
at-icon-image
at-icon-file-doc
at-icon-file-excel
at-icon-file-odt
at-icon-file-pdf
at-icon-file-ppt
at-icon-file-word
at-icon-file-zip
at-icon-access
at-icon-arrow
at-icon-briefcase
at-icon-calendar
at-icon-check
at-icon-close
at-icon-envelope-open
at-icon-external-link
at-icon-flag
at-icon-location
at-icon-location-alt
at-icon-menu
at-icon-menu-secondary
at-icon-option
at-icon-paperclip
at-icon-play
at-icon-search
at-icon-selected
at-icon-selector-down
at-icon-selector-up
at-icon-square
at-icon-last
at-icon-first
at-icon-plus
at-icon-minus
at-icon-equal
at-icon-etc
at-icon-more
at-icon-target
at-icon-grid
at-icon-logout
at-icon-alert
at-icon-info
at-icon-clock
at-icon-temperature

Ligazón con icona intelixente

<ul>
    <li><a href="https://www.researchgate.net/profile/perfil_exemplo" class="at-link-smart-icon">Ligazón a ResearchGate</a></li>
    <li><a href="https://orcid.org/exemplo" class="at-link-smart-icon">Ligazón a ORCID</a></li>
    <li><a href="https://facebook.com/exemplo" class="at-link-smart-icon">Ligazón a Facebook</a></li>
    <li><a href="https://twitter.com/exemplo" class="at-link-smart-icon">Ligazón a Twitter</a></li>
    <li><a href="https://instagram.com/exemplo" class="at-link-smart-icon">Ligazón a Instagram</a></li>
    <li><a href="https://linkedin.com/exemplo" class="at-link-smart-icon">Ligazón a LinkedIn</a></li>
    <li><a href="https://pinterest.com/exemplo" class="at-link-smart-icon">Ligazón a Pinterest</a></li>
    <li><a href="https://sharepoint.usc.gal/exemplo" class="at-link-smart-icon">Ligazón a intranet</a></li>
    <li><a href="https://usc.gal/exemplo.pdf" class="at-link-smart-icon">Ligazón a un arquivo PDF</a></li>
    <li><a href="https://usc.gal/exemplo.docx" class="at-link-smart-icon">Ligazón a un arquivo Word</a></li>
    <li><a href="https://usc.gal/exemplo.odt" class="at-link-smart-icon">Ligazón a un arquivo ODT</a></li>
    <li><a href="https://usc.gal/exemplo.xlsx" class="at-link-smart-icon">Ligazón a un arquivo Excel</a></li>
    <li><a href="https://usc.gal/exemplo.ppt" class="at-link-smart-icon">Ligazón a un arquivo de presentación</a></li>
    <li><a href="https://usc.gal/exemplo.zip" class="at-link-smart-icon">Ligazón a un arquivo ZIP</a></li>
    <li><a href="https://usc.gal/" class="at-link-smart-icon">Calquera outra ligazón</a></li>
</ul>

<ul class="ml-buttons-list is-vertical">
    <li class="at-button is-tertiary at-link-smart-icon has-anchor-as-child"><a href="https://www.researchgate.net/profile/perfil_exemplo" class="">Ligazón a ResearchGate</a></li>
    <li class="at-button is-tertiary at-link-smart-icon has-anchor-as-child"><a href="https://www.linkedin.com/exemplo" class="">Ligazón a LinkedIn</a></li>
    <li class="at-button is-tertiary at-link-smart-icon has-anchor-as-child"><a href="https://usc.gal/exemplo.pdf">Ligazón a un arquivo PDF</a></li>
    <li class="at-button is-tertiary at-link-smart-icon has-anchor-as-child"><a href="https://usc.gal/">Calquera outra ligazón</a></li>
    <li class="at-button is-tertiary at-link-smart-icon has-anchor-as-child"><a href="https://sharepoint.usc.gal/">Ligazón a intranet</a></li>
</ul>

Imaxes

Texto descritivo
<figure class="at-image">
    <img src="https://picsum.photos/768/433" alt="">
    <figcaption class="image-caption">Texto descritivo</figcaption>
</figure>

Texto de introdución

Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus.

<div class="at-lead-text">
    <p>Vestibulum ac convallis lectus. <a href="">Proin in nibh imperdiet</a>, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus.</p>
</div>

Etiquetas

Etiqueta Etiqueta Etiqueta Eliminar 

<a href="" class="at-tag is-primary">Etiqueta</a>
<a href="" class="at-tag is-secondary">Etiqueta</a>
<span class="at-tag is-secondary is-dismissable">
    Etiqueta
    <a href="" class="tag-dismiss"><span class="is-sr-only">Eliminar</span></a>
</span>

Titulares

Título 1

Título 2

Título 2

Título 3

Título 3

Título 4

Título 6
<h1 class="at-title is-1">Título 1</h1>
<h2 class="at-title is-2">Título 2</h2>
<h2 class="at-title is-2 is-sans">Título 2</h2>
<h3 class="at-title is-3">Título 3</h3>
<h3 class="at-title is-3 is-light">Título 3</h3>
<h4 class="at-title is-4">Título 4</h4>
<h6 class="at-title is-6">Título 6</h6>

Filtro de texto

<usc-text-filter
    label="Filtro de texto"
    name="filter_1"
    icon="at-icon-search"
    target-container="#container-1"
    target-items=".ml-banner"
></usc-text-filter>

Filtro despregable

<usc-dropdown-filter
    label="Filtro"
    target-container="#filtered-container-selector"
    target-items=".target-items-selector"
    :initial-value="{key: 'is-type-1', value: 'Tipo 1'}"
>
    <template v-slot:default="slotProps">
        <li>
            <button type="button" @click="slotProps.reset">Todos</button>
        </li>
        <li>
            <button type="button" @click="slotProps.filter" data-value="is-type-1">Tipo 1</button>
        </li>
        <li>
            <button type="button" @click="slotProps.filter" data-value="is-type-2">Tipo 2</button>
        </li>
    </template>
</usc-dropdown-filter>

<usc-dropdown-filter
    label="Filtro"
>
    <template v-slot:default>
        <li>
            <a href="">Filtro con ligazón a páxina 1</a>
        </li>
        <li>
            <a href="">Filtro con ligazón a páxina 2</a>
        </li>
    </template>
</usc-dropdown-filter>

Filtro selectize

Para filtros tipo despregable con moitos resultados. Permite buscar sobre as opcións diposñibles.

<usc-selectize-filter
    label="Filtro"
    target-container="#filtered-container-selector"
    target-items=".target-items-selector"
    :options="[{key: 'is-type-1', value: 'Tipo 1'}, {key: 'is-type-2', value: 'Tipo 2'}]"
>
</usc-selectize-filter>

Botón de imprimir

Este compoñente permite imprimir unha parte determinada da páxina. Hai que especificarlle o id do elemento que queremos que se imprima na propiedade target. Podemos especificarlle un modificador de tipo de botón.

Imprimir 
<usc-print-button target="print-button" class="is-primary">
    Imprimir
</usc-print-button>
Loading…
Loading the web debug toolbar…
Attempt #