Menú

Bloques full-width

Estilos para crear bloques full width.

Contenido

Variantes altura
Variante de color oscuro
Con imagen de fondo
Con video de fondo

Variantes altura

Para crear un bloque con variante de altura seguimos el patrón de la clase .fullwidth.

Hay 4 tipos de alturas .fullwidth--2y, .fullwidth--3y, y .fullwidth--4y donde 2y corresponde a 456px, 1y a 228px (lo mismo que no poner clase) y a partir de ahí coge valores múltiplos de ese número. A nivel interno sigue teniendo un div con la clase .fullwidth__wrapper para que el contenido mantenga el ancho de la web. A este elemento se le puede poner una imagen de fondo con estilos inline style="background-image: url(...);" la cual podemos alinear a la izquierda o a la derecha aplicándole una clase modificadora al elemento que la contiene (.fullwidth--img-left o .fullwidth--img-right), o dejar centrada si no le aplicamos ninguna clase. Dentro del div con clase .fullwidth se puede crear otro div para poner el contenido que se quiera.

A continuación se muestran 2 ejemplos, uno para la altura 1y con textos e imagen, y otro para la 2y sin textos y sin imagen. Para el color de fondo de cualquiera de los layouts utilizaremos los helpers (bg-primary, bg-secondary...).

Encabezado del ejemplo con altura 1y

Albus talis nuptias fel

Domesticus rector baremun!

Sunt fluctuses acquirere talis.

Pol, capio! Cum medicina experimentum, omnes cottaes acquirere primus, bassus zirbuses.

<section class="fullwidth bg-secondary">
  <div style="background-image: url(/assets/img/banner-21.jpg);" class="fullwidth__wrapper fullwidth--img-right">
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-lg-4">
          <div role="heading" aria-level="4" class="h2">Albus talis nuptias fel</div>
          <div role="heading" aria-level="5" class="h3">Domesticus rector baremun!</div>
        </div>
        <div class="col-md-8 col-lg-5 col-xl-4">
          <p class="h5">   Sunt fluctuses acquirere talis.</p>
          <p>Pol, capio! Cum medicina experimentum, omnes cottaes acquirere primus, bassus zirbuses.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Encabezado del ejemplo con altura 2y

Albus talis nuptias fel

Domesticus rector baremun!

Sunt fluctuses acquirere talis.

Pol, capio! Cum medicina experimentum, omnes cottaes acquirere primus, bassus zirbuses. A falsis, mens fidelis clinias. Verpa, eleates, et domus. Tumultumques accelerare in cubiculum!

<section class="fullwidth fullwidth--2y bg-secondary">
  <div style="background-image: url(/assets/img/banner-21.jpg);" class="fullwidth__wrapper fullwidth--img-right">
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-lg-4">
          <div role="heading" aria-level="4" class="h2">Albus talis nuptias fel</div>
          <div role="heading" aria-level="5" class="h3">Domesticus rector baremun!</div>
        </div>
        <div class="col-md-8">
          <p class="h5">   Sunt fluctuses acquirere talis.</p>
          <p>Pol, capio! Cum medicina experimentum, omnes cottaes acquirere primus, bassus zirbuses. A falsis, mens fidelis clinias. Verpa, eleates, et domus. Tumultumques accelerare in cubiculum!</p>
        </div>
      </div>
    </div>
  </div>
</section>

Variante de color

Habrá banners que utilicen fondo oscuro y tipografía blanca, para ello utilizaremos las clases .bg-primary y inverse.

Encabezado con color oscuro y fuente blanca

Esto es un encabezado h3

Cur bubo messis. Pars de brevis amicitia, tractare boreas! Nunquam tractare gallus.

<section class="fullwidth bg-primary inverse">
  <div class="fullwidth__wrapper">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h1 class="h3"><b>Esto es un encabezado h3</b>&nbsp;Esto es un encabezado h3</h1>
        </div>
        <div class="col-md-8">
          <h2 class="h4"><b>Texto más grande, para banners, etc.</b>&nbsp;Texto más grande, para banners, etc.</h2>
          <h2 class="h4"><b>Texto más grande, para banners, etc.</b>&nbsp;Texto más grande, para banners, etc.</h2>
        </div>
      </div>
    </div>
  </div>
</section>

Con imagen de fondo

Para crear un bloque fullwidth con imagen de fondo habrá que utilizar un contenedor, en este caso utilizaremos un section (un div también sería válido) con la clase fullwidth y el modificador fullwidth--bg. Como se puede ver, dentro de las capas hay un tag a (opcional y hermano del div.fullwidth__wrapper ) que deberá llevar la clase full-bg__arrow. Dicho link actúa como tag de anclaje para poder saltar a una parte específica de la página, si se desea, poniendo en el atributo href del tag a el id de donde se quiere saltar.

Encabezado del ejemplo

<section class="banner-full banner-full--inverse"><img src="/assets/img/bg1.jpg" aria-labelledby="banner-full__title1" aria-describedby="banner-full__description1" class="fullwidth__image">
  <div class="banner-full__content col-xs-12">
    <div class="row">
      <div class="col-md-6"><span id="banner-full__title1" class="banner-full__title">Titulo</span>
        <p id="banner-full__description1" class="banner-full__description">Descripción</p><a href="#" class="btn btn--call-to-action col-xs-6">Call to action</a>
      </div>
    </div>
  </div><a role="button" aria-label="Texto anclaje" title="Texto anclaje" href="#anchor" class="icon icon--arrow-down anchor"></a>
</section>

Con video de fondo

Encabezado del ejemplo

<section class="banner-full banner-full--inverse" data-video>
    <img src="..." alt="" class="fullwidth__image" data-video-img aria-labelledby="banner-full__title1" aria-describedby="banner-full__description1">
    <div class="banner-full__tint"></div>
    <div class="banner-content col-xs-12" data-video-container>
        <div class="row">
            <div class="col-md-6">
                <span class="banner-full__title" id="banner-full__title2">...</span>
                <p class="banner-full__description" id="banner-full__description2">...</p>
                <a href="..." class="btn btn--call-to-action col-xs-6" aria-label="Texto descriptivo" title="Texto descriptivo">Call to action</a>
            </div>
        </div>
    </div>
    <a href="#anchorId" role="button" aria-label="Texto descriptivo" title="Texto descriptivo" class="icon icon--arrow-down anchor" data-video-hidden></a>
    <button aria-label="Texto descriptivo" class="fullwidth--icon-center icon icon--play-center inverse invisible" data-video-play data-video-playonload></button>
    <div class="embedded-video">
        <div class="embedded-video__iframe" id="ytplayer1" data-video-id="qvHiV82-PuE" data-video-autoplay="1"></div>
    </div>
</section>

Subir