Use class .board followed by the nested structure .text, .child and .child-center to create a container with vertically centered text content.
Use class .claim to format the main title.
Use class .board-executive to apply a background image.
Tenemos las mejores oportunidades del mercado para acercarte al siguiente paso en tu carrera.
Activar mi cuenta ExecutiveEn un solo click recuperando tu CV de InfoJobs
<div class="board board-executive">
<div class="text">
<div class="child">
<div class="child-center">
<h1 class="claim">Cuenta Executive, exclusiva para directivos, managers y especialistas de alto nivel</h1>
<p class="description">Tenemos las mejores oportunidades del mercado para acercarte al siguiente paso en tu carrera.</p>
<a class="btn btn-primary btn-large" href="#" onclick="unfold();">Activar mi cuenta Executive</a>
<p class="small">En un solo click recuperando tu CV de InfoJobs</p>
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra ante enim, cursus fringilla metus hendrerit non.
Use class .btn-group to create a button group structure.
Use class .btn-default for buttons inside buttons group.
Use class .active to highlight the selected button.
<div class="btn-group">
<div class="active">
<button class="btn btn-default" type="button">year</button>
</div>
<div>
<button class="btn btn-default" type="button">month</button>
</div>
<div>
<button class="btn btn-default" type="button">hour</button>
</div>
</div>
Use class .btn-group-justified to display .btn-group full width buttons.
<div class="btn-group btn-group-justified">
<div class="active">
<button class="btn btn-default" type="button">year</button>
</div>
<div>
<button class="btn btn-default" type="button">month</button>
</div>
<div>
<button class="btn btn-default" type="button">hour</button>
</div>
</div>
Use class .iconfont-[name] to display an icon inside the button.
<div class="btn-group">
<div>
<a class="btn btn-default iconfont-Facebook" href="#" title="Comparte esta oferta en Facebook"><span class="hide">Comparte esta oferta en Facebook</span></a>
</div>
<div>
<a class="btn btn-default iconfont-Twitter" href="#" title="Tweetea esta oferta"><span class="hide">Tweetea esta oferta</span></a>
</div>
</div>
Use class .btn-file to display an input type file.
<div class="btn btn-default btn-file">
<span>Subir foto</span>
<input type="file" value="Subir foto" />
</div>
Use class .content-middle to center vertically text with other media content or .content-top to align to top text and media.
Apply .content-type-text and .content-type-media to build the text and media content structure.
<div class="heading-addons">
<div class="content-middle">
<div class="content-type-text">
<h1>Lorem ipsum dolor sit amet</h1>
</div>
<div class="content-type-media">
<a href="#">
<figure class="fig-thumbnail fig-thumbnail-logo slide-up">
<img title="BROS GROUP - Ofertas de trabajo" src="./images/pictures/pic-company-logo.png" alt="Lorem ipsum dolor sit amet">
<figcaption class="fig-thumbnail-caption slide-item">
<p class="fig-thumbnail-details">Lorem ipsum</p>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
To create custom backgrounds use a style attribute in html for the background-image.
Use class .custom-bg to make the image responsive.
Use class.overlay-60 to apply an overlay.
<div class="custom-bg overlay-60" style="background-image: url('./images/backgrounds/bg-header-grid-01.jpg');">
<div class="inner">
<h1>Custom background</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
</div>
</div>
<div class="form filters">
<fieldset>
<legend class="fieldset-title">Palabra clave</legend>
<ul class="filter-keyword clearfix">
<li class="filter-field keyword">
<label for="keyword" class="hide-small-device hide-medium-device hide-large-device">Palabra clave</label>
<input type="text" value="" name="keyword" id="keyword" maxlength="200" class="input-little">
</li>
<li class="filter-field keyword-submit">
<button data-small-device="OK" data-large-device="Filtrar" onclick="searchByKeyword()" type="submit" id="buttonKeyword" class="btn btn-default btn-form-inline">Filtrar</button>
</li>
</ul>
</fieldset>
</div>
Structure to display a job list.
Structure to display indicators.
View demo with toggle show/hide for mobile device. The example in demo needs toggle.js.
<div class="kpi">
<span data-endval="0" data-duration="1" class="kpi-indicator">0</span>
<h2 class="kpi-title">Candidaturas activas</h2>
<div class="kpi-body">
<p>No te has inscrito en ninguna oferta recientemente</p>
<a class="link-underline" href="#">Buscar ofertas de empleo</a>
</div>
</div>
Contextual notifications for messages.
The modifier classes are .notification-error for errors, .notification-success for success, .notification-info for information and .notification-warning for warnings.
Use class .notification-dismissable for notifications with close button.
Wrap in div with class .notification-toast-fixed to fix at top of the page, View demo
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget. Link underline
<!-- Notification-->
<div class="notification notification-info">
<p class="title">Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget. <a href="#" class="link-underline">Link underline</a></p>
</div>
<!-- /Notification-->
<div class="container-expanded">
<!-- Notification error -->
<div class="notification notification-error notification-dismissable">
<button class="btn-close" type="button">x</button>
<p class="title">Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget. <a href="#" class="link-underline">Link underline</a></p>
</div>
<!-- /Notification error -->
</div>
<div class="container-expanded">
<!-- Notification success -->
<div class="notification notification-success notification-dismissable">
<button class="btn-close" type="button">x</button>
<p class="title">Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget. <a href="#" class="link-underline">Link underline</a></p>
</div>
<!-- /Notification success -->
</div>
<div class="container-expanded">
<!-- Notification info -->
<div class="notification notification-info notification-dismissable">
<button class="btn-close" type="button">x</button>
<p class="title">Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget. <a href="#" class="link-underline">Link underline</a></p>
</div>
<!-- /Notification info -->
</div>
<div class="container-expanded">
<!-- Notification warning -->
<div class="notification notification-warning notification-dismissable">
<button class="btn-close" type="button">x</button>
<p class="title">Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget. <a href="#" class="link-underline">Link underline</a></p>
</div>
<!-- /Notification warning -->
</div>
For pagination wrap a .btn-group structure with class .pagination as a parent.
Use class .active for the active button.
<div class="pagination">
<div class="btn-group">
<div>
<button class="btn btn-default" id="page1" type="button">Anterior</button>
</div>
<div>
<button class="btn btn-default" id="page1" type="button">1</button>
</div>
<div class="active">
<button class="btn btn-default" id="page2" type="button">2</button>
</div>
<div>
<button class="btn btn-default" id="page3" type="button">3</button>
</div>
<div>
<button class="btn btn-default" id="pageNext" type="button" title="Siguiente">Siguiente</button>
</div>
</div>
</div>
Use class .rating-nps in a container to create a rating based on a radio group structure.
Use class .range-group and .rage as example for min and max value.
Use class .radio-group to create a radio button group with inline structure.
<form>
<div class="rating-nps">
<fieldset>
<legend>Lorem ipsum</legend>
<ul class="range-group margin-top">
<li id="minRange" class="range">Nada probable</li>
<li id="maxRange" class="range">Muy probable</li>
</ul>
<ul class="radio-group clearfix">
<li>
<input type="radio" name="nps" value="" id="nps0">
<label for="nps0">0</label>
</li>
<li>
<input type="radio" name="nps" value="" id="nps1">
<label for="nps1">1</label>
</li>
<li>
<input type="radio" name="nps" value="" id="nps2">
<label for="nps2">2</label>
</li>
<li>
<input type="radio" name="nps" value="" id="nps3">
<label for="nps3">3</label>
</li>
<li>
<input type="radio" name="nps" value="" id="nps4">
<label for="nps4">4</label>
</li>
<li>
<input type="radio" name="nps" value="" id="nps5">
<label for="nps5">5</label>
</li>
<li>
<input type="radio" name="nps" value="" id="nps6">
<label for="nps6">6</label>
</li>
<li>
<input type="radio" name="nps" value="" id="nps7">
<label for="nps7">7</label>
</li>
<li>
<input type="radio" name="nps" value="" id="nps8">
<label for="nps8">8</label>
</li>
<li>
<input type="radio" name="nps" value="" id="nps9">
<label for="nps9">9</label>
</li>
<li>
<input type="radio" name="nps" value="" id="nps10">
<label for="nps10">10</label>
</li>
</ul>
</fieldset>
</div>
</form>
Use class .tabs-menu and .tabs to create a structure of vertical tabs menu.
The tabs structure can also be with icons. View demo
<ul class="tabs tabs-menu inner">
<li><a href="#">Lorem Ipsum Link</a></li>
<li><a href="#">Lorem Ipsum Link</a></li>
<li><a href="#">Lorem Ipsum Link</a></li>
<li><a href="#">Lorem Ipsum Link</a></li>
<li><a href="#">Lorem Ipsum Link</a></li>
</ul>
Use class .tabs-menu--link, .tabs-menu and .tabs to create a structure of vertical tabs menu.
<ul class="tabs tabs-menu tabs-menu--link inner">
<li><a href="#">Lorem Ipsum Link</a></li>
<li><a href="#">Lorem Ipsum Link</a></li>
<li><a href="#">Lorem Ipsum Link</a></li>
<li><a href="#">Lorem Ipsum Link</a></li>
<li><a href="#">Lorem Ipsum Link</a></li>
</ul>
Logo with caption at bottom.
The combination of classes .slide-up in <figure> and .slide-item in <figcaption> is used to show the caption on hovering with the mouse over the logo.
<div class="row">
<div class="col-4">
<!-- Thumbnail logo -->
<figure class="fig-thumbnail fig-thumbnail-logo slide-up">
<a href="#">
<img style="width: 100%;" border="0" alt="" src="./media/pictures/pic-company-logo.png">
<figcaption class="fig-thumbnail-caption slide-item">
<p class="fig-thumbnail-details">Ver ofertas</p>
</figcaption>
</a>
</figure>
<!-- /Thumbnail logo -->
</div>
</div>
Use class .user-feedback followed by the nested structure .link-user-feedback to create the feedback container.
You can define a copy for mobile or desktop using data-mobile and data-desktop in html tag (example: <a href="#" class="link-user-feedback" data-mobile="Mobile text" data-desktop="Desktop text">User Feedback</a>) and calling changeButtonText.js.
<div class="user-feedback">
<a href="#" class="link-user-feedback">User Feedback</a>
</div>