Cabecera
La cabecera es un elemento complejo que por sus características, se presenta en una página separada, con el fin de que ocupe el tamaño real que finalmente ocupará: Ejemplo de cabecera.
Contenido
- Cabecera de marca principal - Con inicio de sesión
- Cabecera de marca principal - Sin inicio de sesión
- Cabecera de submarca - Con inicio de sesión
- Cabecera de submarca - Sin inicio de sesión
- Cabecera de marca Campus ligera - Con título
- Cabecera de marca Campus ligera - Sin título
- Cabecera de submarca ligera UOC X
Cabecera de marca principal con inicio de sesión
Esta será la cabecera de la marca principal, la cual añadirá el icono de inicio de sesión.
Este tipo de cabecera además de su estructura propia, debe tener añadida la clase header-1, la cual ayudará a que los estilos se muestren correctamente.
Si se está usando la etiqueta
h1 en el contenido de la página, sustituir el h1 de la
cabecera por div o span
Ejemplo de cabecera con inicio de sesión
<header id="main-header-1" class="brand-header brand-secondary header-1">
<div class="header-container clearfix">
<div class="col-clear nav-menu-top">
<div class="hidden-xs hidden-sm hidden-md">
<div class="col-xs-2 col-sm-1 top-logo top-logo-desktop hidden-xs hidden-sm hidden-md custom-spacing"><a href="#"><img src="../../assets/img/logo-uoc-white.png" alt="Logo UOC"></a></div>
<div class="col-md-9 col-lg-9 custom-spacing">
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
<p class="nav-menu-title"> Universitat Oberta de Catalunya</p>
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
</div>
<div class="col-md-1 custom-spacing">
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
<div class="dropdown language-drop-down" data-dropdown="">
<button class="btn dropdown__trigger" data-dropdown-trigger="" aria-label="Cambio de idioma (ES)"
aria-expanded="false" aria-controls="dropdown__content1">ES<span
class="icon icon--arrow-down icon--small bold m-left-x2" aria-hidden="true"></span></button>
<div class="dropdown__content dropdown__list" id="dropdown__content1">
<ul data-animated="false">
<li class="dropdown__item"><a class="dropdown__link" href="#" lang="ca">Català</a></li>
<li class="dropdown__item is-active" aria-current="true"><a class="dropdown__link" href="#" lang="es">Español</a>
</li>
</ul>
<button class="btn btn--close" aria-label="Cerrar cambio de idioma (X)" aria-controls="dropdown__content1"
data-dropdown-close=""><span class="icon icon--close" aria-hidden="true"></span></button>
</div>
</div>
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
</div>
<div class="col-md-1 custom-spacing">
<div class="fill-white icon-campus"><a class="desktop-btn"><span aria-hidden="true" class="icon icon--campus"></span><span class="icon-alt">Acceso al campus</span></a></div>
</div>
</div>
<div class="hidden-lg hidden-xl">
<div class="mobile-menu">
<div class="menu-mobile-container">
<div class="top-logo"><a href="#"><img src="../../assets/img/logo-uoc-white.png" alt="Logo UOC"></a></div>
<div class="top-slogan"><span class="ruler ruler--double ruler--white ruler--dynamic w100-inline-block nav-menu-title">Universitat Oberta <br aria-hidden="true">de Catalunya</span></div>
<div class="mobile-buttons">
<div class="virtual-campus-button-container-mobile border-color-dynamic"><a class="mobile-button"><span aria-hidden="true" class="icon icon--campus"></span><span class="icon-alt">Acceso al campus</span></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Cabecera de marca principal sin inicio de sesión
Esta será la cabecera de la marca principal, la cual omitirá el icono de inicio de sesión.
Además de la estructura mostrada a continuación, este tipo de cabecera debe incorporar la clase header-2 para mostrar correctamente sus estilos.
Si se está usando la etiqueta
h1 en el contenido de la página, sustituir el h1 de la
cabecera por div o span
Ejemplo de cabecera sin inicio de sesión
<header id="main-header-2" class="brand-header brand-secondary header-2">
<div class="header-container clearfix">
<div class="col-clear nav-menu-top">
<div class="hidden-xs hidden-sm hidden-md">
<div class="col-md-1 col-sm-1 top-logo top-logo-desktop hidden-xs hidden-sm hidden-md custom-spacing"><a href="#"><img src="../../assets/img/logo-uoc-white.png" alt="Logo UOC"></a></div>
<div class="col-md-10 col-lg-10 custom-spacing">
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
<p class="nav-menu-title"> Universitat Oberta de Catalunya</p>
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
</div>
<div class="col-md-1 custom-spacing">
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
<div class="dropdown language-drop-down" data-dropdown="">
<button class="btn dropdown__trigger" data-dropdown-trigger="" aria-label="Cambio de idioma (ES)"
aria-expanded="false" aria-controls="dropdown__content2">ES<span
class="icon icon--arrow-down icon--small bold m-left-x2" aria-hidden="true"></span></button>
<div class="dropdown__content dropdown__list" id="dropdown__content2">
<ul data-animated="false">
<li class="dropdown__item"><a class="dropdown__link" href="#" lang="ca">Català</a></li>
<li class="dropdown__item is-active" aria-current="true"><a class="dropdown__link" href="#" lang="es">Español</a>
</li>
</ul>
<button class="btn btn--close" aria-label="Cerrar cambio de idioma (X)" aria-controls="dropdown__content2"
data-dropdown-close=""><span class="icon icon--close" aria-hidden="true"></span></button>
</div>
</div>
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
</div>
</div>
<div class="hidden-lg hidden-xl">
<div class="mobile-menu">
<div class="menu-mobile-container">
<div class="top-logo"><a href="#"><img src="../../assets/img/logo-uoc-white.png" alt="Logo UOC"></a></div>
<div class="top-slogan"><span class="ruler ruler--double ruler--white ruler--dynamic w100-inline-block nav-menu-title">Universitat Oberta <br aria-hidden="true">de Catalunya</span></div>
</div>
</div>
</div>
</div>
</div>
</header>
Cabecera de submarca con inicio de sesión
Esta será una de las cabeceras que se aplique en las submarcas, en este tipo de cabecera se podrán hallar el nombre de la submarca y el icono de inicio de sesión.
Además de la estructura mostrada a continuación, este tipo de cabecera debe incorporar la clase header-3 para mostrar correctamente sus estilos.
Si se está usando la etiqueta
h1 en el contenido de la página, sustituir el h1 de la
cabecera por div o span
Ejemplo de cabecera para submarca con icono de inicio de sesión
<header id="main-header-3" class="brand-header brand-x header-3">
<div class="header-container clearfix">
<div class="col-clear nav-menu-top">
<div class="hidden-xs hidden-sm hidden-md">
<div class="col-xs-2 col-sm-1 top-logo top-logo-desktop custom-spacing"><a href="#"><img src="../../assets/img/logo-uoc-x-white.png" alt="Logo UOC X"></a></div>
<div class="col-md-7 col-lg-7 custom-spacing">
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
<p class="nav-menu-title title-more-size"><abbr title="Extende Studies">X</abbr></p>
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
</div>
<div class="col-md-2 custom-spacing">
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
<p class="nav-menu-title-aside"> Universitat Oberta de Catalunya</p>
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
</div>
<div class="col-md-2 custom-spacing">
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
<div class="pull-right">
<div class="dropdown language-drop-down" data-dropdown="">
<button class="btn dropdown__trigger" data-dropdown-trigger="" aria-label="Cambio de idioma (ES)"
aria-expanded="false" aria-controls="dropdown__content3">ES<span
class="icon icon--arrow-down icon--small bold m-left-x2" aria-hidden="true"></span></button>
<div class="dropdown__content dropdown__list" id="dropdown__content3">
<ul data-animated="false">
<li class="dropdown__item"><a class="dropdown__link" href="#" lang="ca">Català</a></li>
<li class="dropdown__item is-active" aria-current="true"><a class="dropdown__link" href="#" lang="es">Español</a>
</li>
</ul>
<button class="btn btn--close" aria-label="Cerrar cambio de idioma (X)" aria-controls="dropdown__content3"
data-dropdown-close=""><span class="icon icon--close" aria-hidden="true"></span></button>
</div>
</div>
<div class="area-login"><a href="#" title="Login" aria-label="Login" class="login-ico desktop-btn"><span aria-hidden="true" class="icon icon--campus"></span><span class="icon-alt">Acceso al campus</span></a></div>
</div>
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
</div>
</div>
<div class="hidden-lg hidden-xl">
<div class="mobile-menu">
<div class="menu-mobile-container">
<div class="top-logo"><a href="#"><img src="../../assets/img/logo-uoc-white.png" alt="Logo UOC X"></a></div>
<div class="top-slogan">
<div class="col-xs-5 col-sm-5 title-wrapper"><span class="ruler ruler--double ruler--white ruler--dynamic nav-menu-title left-title">R&I</span></div>
<div class="col-xs-7 col-sm-7 title-wrapper"><span class="ruler ruler--double ruler--white ruler--dynamic nav-menu-title">Universitat Oberta <br aria-hidden="true">de Catalunya</span></div>
</div>
<div class="mobile-buttons">
<div class="virtual-campus-button-container-mobile border-color-dynamic"><a class="mobile-button"><span aria-hidden="true" class="icon icon--campus"></span><span class="icon-alt">Acceso al campus</span></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Cabecera de submarca sin inicio de sesión
Esta será una de las cabeceras que se aplique en las submarcas, en este tipo de cabecera se podrán hallar el nombre de la submarca y el icono de inicio de sesión será omitido.
Además de la estructura mostrada a continuación, este tipo de cabecera debe incorporar la clase header-4 para mostrar correctamente sus estilos.
Si se está usando la etiqueta
h1 en el contenido de la página, sustituir el h1 de la
cabecera por div o span
Ejemplo de cabecera para submarca sin icono de inicio de sesión
<header id="main-header-4" class="brand-header brand-ri header-4">
<div class="header-container clearfix">
<div class="col-clear nav-menu-top">
<div class="hidden-xs hidden-sm hidden-md">
<div class="col-xs-2 col-sm-1 top-logo top-logo-desktop custom-spacing"><a href="#"><img src="../../assets/img/logo-uoc-ri-white.png" alt="Logo UOC"></a></div>
<div class="col-md-8 col-lg-8 custom-spacing">
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
<p class="nav-menu-title title-more-size"> R&I</p>
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
</div>
<div class="col-md-2 custom-spacing">
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
<p class="nav-menu-title-aside"> Universitat Oberta de Catalunya</p>
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
</div>
<div class="col-md-1 custom-spacing">
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
<div class="dropdown language-drop-down" data-dropdown="">
<button class="btn dropdown__trigger" data-dropdown-trigger="" aria-label="Cambio de idioma (ES)"
aria-expanded="false" aria-controls="dropdown__content4">ES<span
class="icon icon--arrow-down icon--small bold m-left-x2" aria-hidden="true"></span></button>
<div class="dropdown__content dropdown__list" id="dropdown__content4">
<ul data-animated="false">
<li class="dropdown__item"><a class="dropdown__link" href="#" lang="ca">Català</a></li>
<li class="dropdown__item is-active" aria-current="true"><a class="dropdown__link" href="#" lang="es">Español</a>
</li>
</ul>
<button class="btn btn--close" aria-label="Cerrar cambio de idioma (X)" aria-controls="dropdown__content4"
data-dropdown-close=""><span class="icon icon--close" aria-hidden="true"></span></button>
</div>
</div>
<span class="ruler ruler--dynamic ruler--white w100-inline-block"></span>
</div>
</div>
<div class="hidden-lg hidden-xl">
<div class="mobile-menu">
<div class="menu-mobile-container">
<div class="top-logo"><a href="#"><img src="../../assets/img/logo-uoc-white.png" alt="Logo UOC"></a></div>
<div class="top-slogan">
<div class="col-xs-5 col-sm-5 title-wrapper"><span class="ruler ruler--double ruler--white ruler--dynamic nav-menu-title left-title">R&I</span></div>
<div class="col-xs-7 col-sm-7 title-wrapper"><span class="ruler ruler--double ruler--white ruler--dynamic nav-menu-title">Universitat Oberta <br aria-hidden="true">de Catalunya</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Cabecera de marca Campus ligera - Con título
Esta será la cabecera de la marca principal ligera aplicable a las páginas de Campus, con título.
Este tipo de cabecera posee una estructura propia e independiente de la cabecera principal.
Ejemplo de cabecera de marca Campus ligera con título
Universitat Oberta de Catalunya
Título de cabecera
<header class="brand-header-light">
<div class="header-container clearfix">
<div class="row">
<div class="col-md-4 col-xl-3">
<a class="top-logo" href="#">
<img src="../../assets/img/logo-uoc-default.png" alt="Logo UOC">
</a>
<p class="top-slogan ruler ruler--secondary ruler--double">Universitat Oberta <br aria-hidden="true"> de Catalunya</p>
</div>
<div class="col-md-8 col-xl-9">
<div class="top-title-wrapper ruler ruler--secondary ruler--double">
<h1 class="top-title">Título de cabecera</h1>
</div>
</div>
</div>
</div>
</header>
Cabecera de marca Campus ligera - Sin título
Esta será la cabecera de la marca principal ligera aplicable a las páginas de Campus, sin título.
Ejemplo de cabecera de marca Campus ligera sin título
Universitat Oberta de Catalunya
<header class="brand-header-light">
<div class="header-container clearfix">
<div class="row">
<div class="col-md-4 col-xl-3">
<a class="top-logo" href="#">
<img src="../../assets/img/logo-uoc-default.png" alt="Logo UOC">
</a>
<p class="top-slogan ruler ruler--secondary ruler--double">Universitat Oberta <br aria-hidden="true"> de Catalunya</p>
</div>
<div class="col-md-8 col-xl-9 hidden-xs hidden-sm">
<div class="top-title-wrapper ruler ruler--secondary ruler--double">
</div>
</div>
</div>
</div>
</header>
Cabecera de submarca ligera UOC X
Esta será la cabecera de submarca ligera UOC X aplicable a las páginas de Xtended Studies.
Ejemplo de cabecera de submarca UOC X
Xtended Studies
<header class="brand-header-light brand-header-light--x">
<div class="header-container clearfix">
<div class="row">
<div class="col-md-5 col-lg-4">
<a class="top-logo" href="#">
<img src="../../assets/img/logo-uoc-x.png" alt="Logo UOC Xtended Studies">
</a>
<div class="top-slogan ruler ruler--x ruler--double">
<p aria-hidden="true">X</p>
<p class="ruler ruler--x">Xtended <br aria-hidden="true">Studies</p>
</div>
</div>
<div class="col-md-7 col-lg-8 hidden-xs hidden-sm">
<div class="top-title-wrapper ruler ruler--x ruler--double"></div>
</div>
</div>
</div>
</header>