Acordeóns
Contido item 1.
Contido item 2.
Contido item 3.
<usc-accordion id="accordion01">
<usc-accordion-item :is-open="true">
<template v-slot:header>Item de acordeón 1</template>
<div class="at-text">
<p>Contido item 1.</p>
</div>
</usc-accordion-item>
<usc-accordion-item>
<template v-slot:header>Item de acordeón 2</template>
<div class="at-text">
<p>Contido item 2.</p>
</div>
</usc-accordion-item>
<usc-accordion-item>
<template v-slot:header>Item de acordeón 3</template>
<div class="at-text">
<p>Contido item 3.</p>
</div>
</usc-accordion-item>
</usc-accordion>Bloques de contido
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis efficitur massa, quis condimentum ex scelerisque sed. Nunc ornare ligula augue, ac egestas dolor semper sit amet. Nulla lobortis convallis est et ultricies. Nunc id lectus nibh. Donec sodales massa vel dictum volutpat. Aenean facilisis sollicitudin nibh at commodo. Nullam rutrum condimentum dolor, et sodales turpis accumsan et. Ut nec eros justo. Aenean sagittis neque tortor, ac euismod nibh efficitur ac. Suspendisse luctus, felis vel varius tincidunt, felis lorem malesuada nulla, non porttitor felis arcu vel urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est justo, sed blandit justo placerat vel. Nulla ac consequat purus. Curabitur quis ante quis orci mattis viverra. Quisque non risus justo. Quisque vel tincidunt ex.
<div class="org-content-block">
<aside class="content-block-attachments-wrapper">
<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>
<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.</p>
</div>
</div>
</aside>
<div class="content-block-content-wrapper">
<div class="at-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis efficitur massa, quis condimentum ex scelerisque sed. Nunc ornare ligula augue, ac egestas dolor semper sit amet. Nulla lobortis convallis est et ultricies. Nunc id lectus nibh. Donec sodales massa vel dictum volutpat. Aenean facilisis sollicitudin nibh at commodo. Nullam rutrum condimentum dolor, et sodales turpis accumsan et. Ut nec eros justo. Aenean sagittis neque tortor, ac euismod nibh efficitur ac. Suspendisse luctus, felis vel varius tincidunt, felis lorem malesuada nulla, non porttitor felis arcu vel urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est justo, sed blandit justo placerat vel. Nulla ac consequat purus. Curabitur quis ante quis orci mattis viverra. Quisque non risus justo. Quisque vel tincidunt ex.</p>
</div>
</div>
</div>Scroll infinito
<usc-infinite-scroll
endpoint="path-to-endpoint"
container-selector=".results-wrapper"
>
<div class="row results-wrapper">
<div class="col-md-6">
Result 1
</div>
<div class="col-md-6">
Result 2
</div>
</div>
</usc-infinite-scroll>Contedor de módulos
Os contedores de módulos serven para construír grellas de moléculas de banner, eventos e novas. Este compoñente conta cun modificador para reducir o espazo entre os seus fillos cando contén banners chamado has-banners, e tres modificadores segundo o tamaño de pantalla que ocupe: is-half, is-three-quarters e is-one-quarter.
<div class="org-modules-container">
<!-- Aquí poden ir moléculas de banners, eventos e novas. -->
</div>Cabeceira web
<the-usc-header>
<template v-slot:logo>
<!-- Aquí o átomo de logo -->
</template>
<template v-slot:utilities>
<ul class="nav-items">
<usc-submenu-nav-item>
<template v-slot:name>USC Virtual</template>
<template v-slot:submenu>
<li class="submenu-item"><a href="">Campus Virtual</a></li>
<li class="submenu-item"><a href="">Secretaría Virtual</a></li>
<li class="submenu-item"><a href="">Taboleiro</a></li>
<li class="submenu-item"><a href="">Minerva</a></li>
</template>
</usc-submenu-nav-item>
<li><a href="">Sede electrónica</a></li>
<!-- Máis menus -->
</ul>
</template>
<template v-slot:profiles>
<ul class="nav-items">
<li><a href="">Estudantes</a></li>
<usc-submenu-nav-item>
<template v-slot:name>Máis perfís</template>
<template v-slot:submenu>
<li class="submenu-item"><a href="">PDI</a></li>
<li class="submenu-item"><a href="">PAS</a></li>
</template>
</usc-submenu-nav-item>
</ul>
<!-- Máis menus -->
</template>
<template v-slot:main>
<ul class="nav-items">
<usc-submenu-nav-item :show-on-hover="true">
<template v-slot:name>USC</template>
<template v-slot:submenu>
<li class="submenu-item"><a href=""><strong>USC</strong></a></li>
<li class="submenu-item"><a href="">A nosa universidade</a></li>
<li class="submenu-item"><a href="">Historia e patrimonio</a></li>
<li class="submenu-item"><a href="">Organización</a></li>
<li class="submenu-item"><a href="">Mecenado</a></li>
<li class="submenu-item"><a href="">USC en cifras</a></li>
</template>
</usc-submenu-nav-item>
<usc-submenu-nav-item item-class="is-studies" :show-on-hover="true">
<template v-slot:name>Estudos</template>
<template v-slot:submenu>
<li class="submenu-item"><a href=""><strong>Estudos</strong></a></li>
<li class="submenu-item"><a href="">Graos</a></li>
<li class="submenu-item"><a href="">Másteres</a></li>
<li class="submenu-item"><a href="">Doutoramento</a></li>
<li class="submenu-item"><a href="">Estudos propios</a></li>
<li class="submenu-item"><a href="">Cursos e congresos</a></li>
</template>
</usc-submenu-nav-item>
<li class="is-journal">
<a href="">USC Vida</a>
</li>
<!-- Máis menus -->
</ul>
</template>
<template v-slot:languages>
<ul class="nav-items">
<usc-submenu-nav-item item-class="nav-item is-desktop">
<template v-slot:name>GL</template>
<template v-slot:submenu>
<li class="submenu-item"><a href="">Galego</a></li>
<li class="submenu-item"><a href="">Español</a></li>
<li class="submenu-item"><a href="">Inglés</a></li>
</template>
</usc-submenu-nav-item>
<li class="nav-item is-mobile">
<a href="">GL</a>
</li>
<li class="nav-item is-mobile">
<a href="">ES</a>
</li>
<li class="nav-item is-mobile">
<a href="">EN</a>
</li>
</ul>
</template>
<template v-slot:search>
<form method="get" action="" class="ml-form">
<div class="form-content">
<div class="form-group has-button">
<label for="site-header-search-input" class="is-sr-only">Busca en toda a web</label>
<input type="search" name="q" class="form-control" id="site-header-search-input" placeholder="Busca en toda a web">
<button type="submit" class="at-button is-primary">Buscar</button>
</div>
</div>
</form>
</template>
</the-usc-header>Cabeceira de organización
<the-usc-organization-header>
<template v-slot:logo>
<a href="" class="at-site-logo">
<img src="/images/logo.svg" alt="Universidade de Santiago de Compostela" />
</a>
</template>
<template v-slot:utilities>
<ul class="nav-items">
<usc-submenu-nav-item>
<template v-slot:name>USC Virtual</template>
<template v-slot:submenu>
<li class="submenu-item"><a href="">Campus Virtual</a></li>
<li class="submenu-item"><a href="">Secretaría Virtual</a></li>
<li class="submenu-item"><a href="">Taboleiro</a></li>
<li class="submenu-item"><a href="">Minerva</a></li>
</template>
</usc-submenu-nav-item>
<li><a href="">Sede electrónica</a></li>
<li><a href="">Directorio</a></li>
</ul>
</template>
<template v-slot:main>
<ul class="nav-items">
<li><a href="">USC</a></li>
<li><a href="" class="is-studies">Estudos</a></li>
<li><a href="" class="is-admission">Admisión</a></li>
</ul>
</template>
<template v-slot:name>
<a href="" class="at-organization-name">Nome da Organización</a>
</template>
<template v-slot:organization>
<ul class="nav-items">
<usc-submenu-nav-item>
<template v-slot:name>Exemplo de submenú</template>
<template v-slot:submenu>
<li class="submenu-item"><a href="">Menú 1</a></li>
<li class="submenu-item"><a href="">Menú 2</a></li>
</template>
</usc-submenu-nav-item>
<li><a href="">Menú 3</a></li>
</ul>
</template>
<template v-slot:languages>
<ul class="nav-items">
<usc-submenu-nav-item item-class="nav-item is-desktop">
<template v-slot:name>GL</template>
<template v-slot:submenu>
<li class="submenu-item"><a href="">Galego</a></li>
<li class="submenu-item"><a href="">Español</a></li>
<li class="submenu-item"><a href="">Inglés</a></li>
</template>
</usc-submenu-nav-item>
<li class="nav-item is-mobile">
<a href="">GL</a>
</li>
<li class="nav-item is-mobile">
<a href="">ES</a>
</li>
<li class="nav-item is-mobile">
<a href="">EN</a>
</li>
</ul>
</template>
<template v-slot:actions>
<li>
<a href="" class="at-action at-icon-access">
<span class="is-sr-only">Perfil</span>
</a>
</li>
</template>
</the-usc-organization-header>Lapelas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.
Contido lapela 2.
<usc-tabs id="uscTabs01" name="UscTabList">
<template v-slot:header>
<usc-tabs-header-item :is-active="true" controls="tab01">
Lapela 1
</usc-tabs-header-item>
<usc-tabs-header-item controls="tab02">
Lapela 2
</usc-tabs-header-item>
</template>
<template v-slot:body>
<usc-tabs-body-item :is-active="true" name="tab01">
<template v-slot:mobile-header>
Lapela 1
</template>
<div class="at-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus. Pellentesque volutpat, ipsum nec consequat consectetur, dui ligula suscipit enim, a pulvinar mi odio ut dui.</p>
</div>
</usc-tabs-body-item>
<usc-tabs-body-item name="tab02">
<template v-slot:mobile-header>
Lapela 2
</template>
<div class="at-text">
<p>Contido lapela 2.</p>
</div>
</usc-tabs-body-item>
</template>
</usc-tabs>Pisos
<section class="org-tier">
<div class="tier-header">
<h2 class="tier-title">Título do piso</h2>
<div class="tier-action">
<a href="">ver máis</a>
</div>
</div>
<div class="tier-content">
<!-- Contido do piso -->
</div>
</section>
<section class="org-tier">
<div class="tier-content">
<!-- Contido do piso sen cabeceira -->
</div>
</section>
<section class="org-tier is-minimal">
<div class="tier-content">
<!-- Contido do piso minimal -->
</div>
</section>Pisos con filtro de contidos
<usc-content-filter-tier
:tier-options="[{ key: 'is-areas', name: 'Por áreas'}, { key: 'is-campus', name: 'Por campus'}]"
:options="[{key: null, name: 'Todo', selected: true}, {key: 'is-type-1', type: 'is-areas', name: 'Artes e humanidades', selected: false}, {key: 'is-type-2', type: 'is-areas', name: 'Ciencias da Saúde', selected: false}, {key: 'is-santiago', type: 'is-campus', name: 'Santiago', selected: false}, {key: 'is-lugo', type: 'is-campus', name: 'Lugo', selected: false} ]"
>
<template v-slot:action>
<a href="">Ver máis</a>
</template>
<template v-slot:content>
<div class="org-modules-container has-banners">
<!-- Módulos coas claves de `options` como clases para poder ser filtrados -->
</div>
</template>
</usc-content-filter-tier>Filtro de contidos
<usc-content-filter
:options="[{key: null, name: 'Todo', selected: true}, {key: 'is-type-1', name: 'Artes e humanidades', selected: false}, {key: 'is-type-2', name: 'Ciencias da Saúde', selected: false} ]"
>
<div class="org-modules-container has-banners">
<!-- Módulos coas claves de `options` como clases para poder ser filtrados -->
</div>
</usc-content-filter>Liña de tempo
A liña de tempo componse de unha ou varias fases, e estas á vez teñen un ou varios elementos.
<div class="org-timeline">
<article class="org-timeline-phase">
<header class="ml-timeline-phase-header">
<h1 class="at-title">Título da etapa</h1>
<h2 class="timeline-phase-subtitle">Subtítulo da etapa</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>
</header>
<ul class="timeline-phase-item-list">
<li class="timeline-phase-item-wrapper">
<div class="ml-timeline-phase-item">
<span class="timeline-phase-item-date">01/01/1900</span>
<h3 class="at-title">Evento 1</h3>
<div class="at-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>
</div>
</div>
<!-- Máis items da liña de tempo -->
</li>
</ul>
</article>
<!-- Máis fases da liña de tempo -->
</div>Para as liñas de tempo con moito contido é recomendable usar o compoñente en versión Javascript, que proporciona unha visualización máis comprimida. Nesta páxina pódese consultar un exemplo en funcionamento.
<usc-timeline>
<usc-timeline-phase :items='[{"date":"01/01/1900","title":"Evento 1","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":null},{"date":"01/01/1900","title":"Evento 2","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":null},{"date":"01/01/1900","title":"Evento 3","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":"http://lorempixel.com/800/450/"},{"date":"01/01/1900","title":"Evento 4","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":null},{"date":"01/01/1900","title":"Evento 5","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":"http://lorempixel.com/800/450/"}]'>
<h1 class="at-title">Etapa primeira</h1>
<h2 class="timeline-phase-subtitle">Século XIV</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>
</usc-timeline-phase>
<usc-timeline-phase :items='[{"date":"01/01/1900","title":"Evento 1","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":null},{"date":"01/01/1900","title":"Evento 2","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":null},{"date":"01/01/1900","title":"Evento 3","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":"http://lorempixel.com/800/450/"},{"date":"01/01/1900","title":"Evento 4","description":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos aliquid, fugiat deleniti atque id eos minima. Commodi, rerum quam ipsam qui, nobis laboriosam aliquam hic impedit, expedita quisquam vitae.</p>","image":null}]'>
<h1 class="at-title">Etapa segunda</h1>
<h2 class="timeline-phase-subtitle">Século XV</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>
</usc-timeline-phase>
</usc-timeline>