Elementos de formulario como inputs y selects, y estructuras de formulario que permiten construir formularios de bloque, de línea y compactos.
El color de fondo de un formulario es dependiente de que su contenedor tenga un color de fondo distinto a blanco.
Inputs habituales en un formulario en su formato más simple. El conjunto de label e input se agrupan en un div o un fieldset con la clase .form-group, y a cada input se le aplica la clase .form-item.
<form action="#" method="post">
<div class="form-group">
<label for="demo1">Nombre</label>
<input type="text" id="demo1" placeholder="Tu nombre" class="form-item">
</div>
<div class="form-group">
<label for="demo2">Email</label>
<input type="email" id="demo2" class="form-item">
</div>
<div class="form-group">
<label for="demo3">Contraseña</label>
<input type="password" id="demo3" placeholder="Tu contraseña" class="form-item">
</div>
<div class="form-group">
<label for="demo4">Ejemplo de select</label>
<select id="demo4" class="form-item">
<option default selected>Selecciona una opción</option>
<option>Valor 1</option>
<option>Valor 2</option>
<option>Valor 3</option>
</select>
</div>
<div class="form-group">
<label for="demo5">Ejemplo de textarea</label>
<textarea id="demo5" rows="3" class="form-item"></textarea>
</div>
<div class="form-group">
<div data-file="" class="fileinputs custom-bottom">
<input id="file-test1" name="file" value="" type="file" multiple="" title="Selecciona adjunt..." data-file-input="" class="inputfile">
<div class="fakefile">
<span class="adjunts">Adjunta...</span>
<input type="text" data-file-fake-input="" readonly="true" aria-readonly="true" class="input inputfake">
</div>
<button title="Elimina adjunt" data-file-delete="" class="borrar-adjunt">
<span aria-hidden="true" class="icon icon--close icon--small"></span>
<span class="icon-alt">Elimina adjunt</span>
</button>
</div>
</div>
</div>
<fieldset class="form-group">
<legend>Selecciona una opción</legend>
<div class="form-radio">
<label for="option1">
<input type="radio" name="radio-options" value="" id="option1">
<span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
Opción 1 de varias opciones con radio
</label>
</div>
<div class="form-radio">
<label for="option2">
<input type="radio" name="radio-options" value="" id="option2">
<span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
Opción 2…
</label>
</div>
<div class="form-radio">
<label for="option3">
<input type="radio" name="radio-options" value="" id="option3">
<span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
Opción 3…
</label>
</div>
</fieldset>
<div class="form-group">
<div class="form-check">
<label for="option4">
<input type="checkbox" id="option4">
<span class="icon icon--checkbox-off icon--small" aria-hidden="true"></span>
Ejemplo de check
</label>
</div>
</div>
<button type="submit" class="btn btn--primary">Enviar</button>
</form>
A continuación se muestra una variante del formulario con fondo azul.
<form method="GET" target="_blank" accept-charset="UTF-8" class="p-x p-y">
<div class="row">
<div class="col-xs-12 h2">¿Quieres más información?</div>
<div class="col-xs-12 form-group m-bottom-y">
<label for="nom" class="visually-hidden">Nombre</label>
<input id="nom" name="i_nom" type="text" size="26" maxlength="30" placeholder="Nombre" value="" class="form-item">
</div>
<div class="col-xs-12 form-group m-bottom-y">
<label for="cognom1" class="visually-hidden">
Primer
apellido
</label>
<input id="cognom1" name="i_cognom1" type="text" size="26" maxlength="30" placeholder="Primer apellido" value="" class="form-item">
</div>
<div class="col-xs-12 form-group m-bottom-y">
<label for="cognom2" class="visually-hidden">
Segundo
apellido
</label>
<input id="cognom2" name="i_cognom2" type="text" size="26" maxlength="30" placeholder="Segundo apellido" value="" class="form-item">
</div>
<div class="col-xs-12 m-bottom-y">
<fieldset class="form-group form-inline-radio">
<legend class="h6 visually-hidden">Sexo</legend><span class="form-radio">
<label for="infoGender--F">
<input id="infoGender--F" type="radio" value="F" name="i_sexe"><span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>Femenino
</label></span><span class="form-radio">
<label for="infoGender--M">
<input id="infoGender--M" type="radio" value="M" name="i_sexe"><span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>Masculino
</label></span>
</fieldset>
</div>
<div class="col-xs-12">
<fieldset class="row">
<legend class="h6 col-xs-5 m-0y">Fecha nacimiento</legend>
<div class="col-xs-7">
<div class="row">
<div class="col-xs-4 form-group m-bottom-y">
<label for="dia" class="visually-hidden">Día</label>
<input id="dia" type="text" placeholder="dd" name="i_dia" class="form-item">
</div>
<div class="col-xs-4 form-group m-bottom-y">
<label for="mes" class="visually-hidden">Mes</label>
<input id="mes" type="text" placeholder="mm" name="i_mes" class="form-item">
</div>
<div class="col-xs-4 form-group m-bottom-y">
<label for="any" class="visually-hidden">Año</label>
<input id="any" type="text" placeholder="aaaa" name="i_any" class="form-item">
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-xs-12 form-group m-bottom-y">
<label for="email" class="visually-hidden">E-mail</label>
<input id="email" type="email" placeholder="E-mail" name="i_email" class="form-item">
</div>
<div class="col-xs-12 form-group m-bottom-y">
<label for="codi_postal" class="visually-hidden">
Código
postal
</label>
<input id="codi_postal" type="text" name="i_codi_postal" maxlength="9" placeholder="Código postal" value="" class="form-item">
</div>
<div class="col-xs-12 m-bottom-y form-group">
<label for="pais" aria-label="Selecciona un país" class="select--custom">
<select id="pais" name="i_pais" class="form-item">
<option value="D">Alemania</option>
<option value="AND">Andorra</option>
<option value="RA">Argentina</option>
<option value="AUS">Australia</option>
...
</select>
</label>
</div>
<div class="col-xs-3 form-group form-tip m-bottom-y">
<label for="normal_prefixe_telefon1" class="visually-hidden">Pref.</label>
<input id="normal_prefixe_telefon1" type="text" placeholder="Pref." name="i_normal_prefixe_telefon1" maxlength="4" class="form-item">
<div class="form-tip__contents">Pref.<span class="form-tips__contents__secondary">Ej: + 34</span></div>
</div>
<div class="col-xs-9 form-group form-tip m-bottom-y">
<label for="normal_telefon1" class="visually-hidden">
Teléfono
1
</label>
<input id="normal_telefon1" type="text" placeholder="Teléfono 1" name="i_normal_telefon1" maxlength="15" class="form-item">
<div class="form-tip__contents">Teléfono 1<span class="form-tips__contents__secondary">Ej: 123456789</span></div>
</div>
<div class="col-xs-3 form-group form-tip m-bottom-y">
<label for="normal_prefixe_telefon2" class="visually-hidden">Pref.</label>
<input id="normal_prefixe_telefon2" type="text" placeholder="Pref." name="i_normal_prefixe_telefon2" maxlength="4" class="form-item">
<div class="form-tip__contents">Pref.<span class="form-tips__contents__secondary">Ej: + 34</span></div>
</div>
<div class="col-xs-9 form-group form-tip m-bottom-y">
<label for="normal_telefon2" class="visually-hidden">
Teléfono
2
</label>
<input id="normal_telefon2" type="text" placeholder="Teléfono 2" name="i_normal_telefon2" maxlength="15" class="form-item">
<div class="form-tip__contents">Teléfono 2<span class="form-tips__contents__secondary">Ej: 123456789</span></div>
</div>
<div class="col-xs-12 form-group m-bottom-y"><span>¿En qué idioma deseas recibir la información?</span>
<label for="lang_info" aria-label="Selecciona un idioma" class="select--custom">
<select id="lang_info" name="i_idioma_interlocucio" class="form-item">
<option value="" selected="">Selecciona un idioma</option>
<option value="CAS">Castellano</option>
<option value="CAT">Catalán</option>
</select>
</label>
</div>
<div class="col-xs-12 form-group m-bottom-y">
<div class="form-check">
<label for="infoTerms">
<input id="infoTerms" type="checkbox" name="i_rebre_inf"><span aria-hidden="true" class="icon icon--checkbox-off icon--small"></span>Acepto los<a target="_blank" href="#" title="terminos y condiciones" rel="noopener noreferrer" class="text-decoration-underline">
términos y condiciones
legales.</a>
</label>
</div>
<button type="submit" onclick="void(0)" class="btn btn--primary">Solicita información</button>
</div>
</div>
</form>
<div>
La clase .form-group aplicada a los div o fieldset hace que cada grupo de label e input se comporte como un bloque y aplica un margen inferior.
<form method="post" action="#">
<div class="form-group">
<label for="demo-block1">Nombre</label>
<input type="text" class="form-item" placeholder="Tu nombre" id="demo-block1">
</div>
<div class="form-group">
<label for="demo-block2">Apellidos</label>
<input type="text" class="form-item" placeholder="Tus Apellidos" id="demo-block2">
</div>
</form>
La clase .form-group--inline se puede incluir como modificador de .form-group para que los campos se coloquen en línea. Si se quieren ocultar visualmente los label, se les debe añadir la clase .visually-hidden y asegurarse de que los input tengan un placeholder. Los label se mantienen siempre por motivos de accesibilidad.
<form action="#" method="post" >
<div class="form-group form-group--inline">
<label for="demo-inline1">Nombre</label>
<input type="text" id="demo-inline1" placeholder="Tu nombre" class="form-item form-item--inline">
</div>
<div class="form-group form-group--inline">
<label for="demo-inline2">Apellido</label>
<input type="text" id="demo-inline2" placeholder="Tu apellido" class="form-item form-item--inline">
</div>
<div class="form-group form-group--inline">
<button type="submit" class="btn btn--primary">Enviar</button>
</div>
</form>
<form action="#" method="post">
<div class="form-group form-group--inline">
<label for="demo-comp1" class="visually-hidden">Nombre</label>
<input type="text" id="demo-comp1" placeholder="Nombre" class="form-item">
</div>
<div class="form-group form-group--inline">
<label for="demo-comp2" class="visually-hidden">Apellido</label>
<input type="text" id="demo-comp2" placeholder="Apellido" class="form-item">
</div>
<div class="form-group form-group--inline">
<button type="submit" class="btn btn--primary">Enviar</button>
</div>
</form>
El formulario compacto está diseñado para formularios con muy pocos campos (idealmente, uno) en espacios muy reducidos, como puede ser en una cabecera. Para emplearlo, se agrega la clase .form-group--compact al contenedor con la clase .form-group, a los campos se les agrega la clase .form-item--compact, y al botón de acción se le agrega la clase .form-submit--compact.
<form action="#" method="post">
<div class="form-group form-group--compact">
<label for="demo-compact1" class="visually-hidden">Email</label>
<input type="text" id="demo-compact1" placeholder="Email" class="form-item form-item--compact" />
<button class="btn btn--primary form-submit--compact" type="submit">Enviar</button>
</div>
</form>
<form action="#" method="post">
<div class="form-group form-group--compact">
<button class="btn btn--primary form-submit--compact float-left" type="submit">Enviar</button>
<label for="demo-compact2" class="visually-hidden">Email</label>
<input type="text" id="demo-compact2" placeholder="Email" class="form-item form-item--compact" />
</div>
</form>
Se pueden emplear las clases de retícula (como .col-lg-3) en los fieldset u otros bloques para ajustarlos a la retícula general. Se pueden consultar todas las clases de retícula en la sección de retícula.
Cuando un .form-group lleve al menos una clase de retícula, deberá llevar la clase modificadora .form-group--col para que respete sus márgenes laterales y no se queden juntos unos con otros.
<form action="#" method="post" class="row bg-grey-light form-padding">
<div class="form-group form-group--col col-lg-3">
<label for="demo-grid1">Nombre</label>
<input type="text" id="demo-grid1" placeholder="Tu nombre" class="form-item">
</div>
<div class="form-group form-group--col col-lg-5">
<label for="demo-grid2">Email</label>
<input type="email" id="demo-grid2" placeholder="Tu email" class="form-item">
</div>
</form>
Los radios y checkbox se colocan dentro de los label correspondientes, agrupados a su vez por divs con la clase .form-radio o .form-checkbox respectivamente. Si se desea que los checkbox o radios aparezcan en en la misma línea en vez de en bloque, se puede agregar a .form-group la clase .form-inline-checkbox o .form-inline-radio respectivamente.
<fieldset class="form-group">
<legend>Elija una o varias opciones</legend>
<div class="form-radio">
<label for="optionch1">
<input type="radio" name="radio-options" id="optionch1">
<span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
Opción 1…
</label>
</div>
<div class="form-radio">
<label for="optionch2">
<input type="radio" name="radio-options" id="optionch2">
<span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
Opción 2…
</label>
</div>
<div class="form-radio">
<label for="optionch3">
<input type="radio" name="radio-options" id="optionch3">
<span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
Opción 3…
</label>
</div>
</fieldset>
<fieldset class="form-group form-inline-radio">
<legend>Elija una o varias opciones</legend>
<label for="optionch-inline1">
<input type="radio" name="radio-options-inline" id="optionch-inline1" role="radio">
<span id="lblOption13" aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
Opción 1 en línea
</label>
<label for="optionch-inline2">
<input type="radio" name="radio-options-inline" id="optionch-inline2" role="radio">
<span id="lblOption23" aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
Opción 2 en línea
</label>
<label for="optionch-inline3">
<input type="radio" name="radio-options-inline" id="optionch-inline3" role="radio">
<span id="lblOption33" aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
Opción 3 en línea
</label>
</fieldset>
<fieldset class="form-group">
<div class="form-check">
<label for="optionch4">
<input type="checkbox" id="optionch4">
<span aria-hidden="true" class="icon icon--checkbox-off icon--small"></span>
Ejemplo de check
</label>
</div>
</fieldset>
<fieldset class="form-group form-inline-check">
<label for="optionch5">
<input type="checkbox" id="optionch5">
<span aria-hidden="true" class="icon icon--checkbox-off icon--small"></span>
Ejemplo de check en línea
</label>
<label for="optionch6">
<input type="checkbox" id="optionch6">
<span aria-hidden="true" class="icon icon--checkbox-off icon--small"></span>
Ejemplo de check en línea
</label>
<label for="optionch7">
<input type="checkbox" id="optionch7">
<span aria-hidden="true" class="icon icon--checkbox-off icon--small"></span>
Ejemplo de check en línea
</label>
</fieldset>Para utilizar los radios y checkbox extendidos, se han de utilizar las clases .form-radio y .form-radio--extended o .form-check y .form-check--extended respectivamente. Si se desea que los checkbox o radios aparezcan en en la misma línea en vez de en bloque, se puede agregar a .form-group las clases .form-inline-check y .form-inline-check--extended o .form-inline-radio y .form-inline-radio--extended respectivamente.
<fieldset class="form-group">
<legend>Elige una de las siguientes opciones</legend>
<div class="form-radio form-radio--extended">
<span class="form-input">
<input name="radio-options" id="optionchext1" type="radio">
<span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
</span>
<label for="optionchext1" class="form-label">Opción 1 de varias opciones con radio</label>
</div>
<div class="form-radio form-radio--extended">
<span class="form-input">
<input name="radio-options" id="optionchext2" type="radio">
<span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
</span>
<label for="optionchext2" class="form-label">Opción 2 de varias opciones con radio</label>
</div>
<div class="form-radio form-radio--extended">
<span class="form-input">
<input name="radio-options" id="optionchext3" type="radio">
<span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
</span>
<label for="optionchext3" class="form-label">Opción 3 de varias opciones con radio y <a href="#">enlace </a></label>
</div>
</fieldset>
<fieldset class="form-group form-inline-radio form-inline-radio--extended">
<legend>Elige una de las siguientes opciones</legend>
<span class="form-input">
<input name="radio-options-inline" id="optionchext-inline1" type="radio">
<span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
</span>
<label for="optionchext-inline1" class="form-label">Opción 1 con radio</label>
<span class="form-input">
<input name="radio-options-inline" id="optionchext-inline2" type="radio">
<span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
</span>
<label for="optionchext-inline2" class="form-label">Opción 2 con radio</label>
<span class="form-input">
<input name="radio-options-inline" id="optionchext-inline3" type="radio">
<span aria-hidden="true" class="icon icon--radio-button-off icon--small"></span>
</span>
<label for="optionchext-inline3" class="form-label">Opción 3 con radio y <a href="#"> enlace </a></label>
</fieldset>
<fieldset class="form-group">
<legend>Elige una de las siguientes opciones</legend>
<div class="form-check form-check--extended">
<span class="form-input">
<input id="optionchext4" type="checkbox">
<span aria-hidden="true" class="icon icon--checkbox-off icon--small"></span>
</span>
<label for="optionchext4" class="form-label">Ejemplo de check</label>
</div>
<div class="form-check form-check--extended">
<span class="form-input">
<input id="optionchext5" type="checkbox">
<span aria-hidden="true" class="icon icon--checkbox-off icon--small"></span>
</span>
<label for="optionchext5" class="form-label">Ejemplo de check</label>
</div>
</fieldset>
<fieldset class="form-group form-inline-check form-inline-check--extended">
<legend>Selecciona una o varias opciones</legend>
<span class="form-input">
<input id="optionchext6" type="checkbox">
<span aria-hidden="true" class="icon icon--checkbox-off icon--small"></span>
</span>
<label for="optionchext6" class="form-label">Ejemplo de check en línea</label>
<span class="form-input">
<input id="optionchext7" type="checkbox">
<span aria-hidden="true" class="icon icon--checkbox-off icon--small"></span>
</span>
<label for="optionchext7" class="form-label">Ejemplo de check en línea</label>
<span class="form-input">
<input id="optionchext8" type="checkbox">
<span aria-hidden="true" class="icon icon--checkbox-off icon--small"></span>
</span>
<label for="optionchext8" class="form-label">Ejemplo de check en línea</label>
</fieldset>
Los select por defecto se muestran con la flecha desplegable del sistema.Si se desea que un select tenga estilos más uniformes con el resto de los campos de formulario, se puede aplicar .select-custom al elemento label y colocar el elemento select dentro del elemento label.
<div class="form-group">
<label for="demo-sel">Nombre</label>
<select id="demo-sel" class="form-item">
<option>Valor 1</option>
<option>Valor 2</option>
<option>Valor 3</option>
</select>
</div>
<div class="form-group">
<label for="demo-selcus" class="slect-custom">Nombre
<select id="demo-selcus" class="form-item">
<option selected>Valor 1</option>
<option>Valor 2</option>
<option>Valor 3</option>
</select>
</label>
</div>
<div class="form-group col-lg-5">
<div class="select--custom--dropdown hint" data-select>
<label class="visually-hidden" data-select-label>Grupo de opciones 1</label>
<select class="form-item" data-select-value>
<option value="">Escoja una opción</option>
<option value="1">Valor 1</option>
<option value="2">Valor 2</option>
<option value="3">Valor 3</option>
<option value="4">Valor 4</option>
<option value="5">Valor 5</option>
<option value="6">Valor 6</option>
<option value="7">Valor 7</option>
<option value="8">Valor 8</option>
</select>
</div>
</div>
Se puede evitar que los select se carguen cuando la página se carga, añadiendo al elemento data-select, el atributo data-lazy-load. Para cargar los select con este atributo, se deben usar las funciones fw_initAllLazyLoadSelects() la cual cargará todos los select con data-lazy-load que no se han cargado aún o se puede cargar un select concreto mediante la función fw_initLazyLoadSelect(id-data-select), pasando el id del data-select que tiene el atributo data-lazy-load.
<div class="form-group col-lg-5">
<div class="select--custom--dropdown hint" data-select data-lazy-load>
<label class="visually-hidden" data-select-label>Grupo de opciones 2</label>
<select class="form-item" id="demo-selcus2" data-select-value>
<option value="">Escoja una opción</option>
<option value="1">Valor 1</option>
<option value="2">Valor 2</option>
<option value="3" selected>Valor 3</option>
<option value="4">Valor 4</option>
<option value="5">Valor 5</option>
<option value="6">Valor 6</option>
<option value="7">Valor 7</option>
<option value="8">Valor 8</option>
</select>
</div>
</div>
Los inputs de formulario con el atributo default o la clase .default se muestran con un fondo gris claro y el cursor de not-allowed. Se emplean cuando un input está bloqueado por que hay interacciones previas pendientes. El uso del atributo es necesario para un correcto funcionamiento; la clase es opcional, para sobrescribir otros estilos.
<div class="form-group">
<label for="demo-disab">Nombre</label>
<input type="text" id="demo-disab" value="John Smith" default class="form-item default">
</div>
Los inputs de formulario con el atributo readonly o la clase .readonly se muestran con un fondo gris claro. Se emplean cuando se muestra un dato en el input a modo de consulta, pero sin que se pueda modificar. El uso del atributo es necesario para un correcto funcionamiento; la clase es opcional, para sobrescribir otros estilos.
<div class="form-group">
<label for="demo-readonly">Nombre</label>
<input type="text" id="demo-readonly" value="John Smith" readonly class="form-item readonly">
</div>
Se puede incluir un texto de ayuda o apoyo bajo un input añadiendo la clase .form-tip a un .form-group y añadiendo un div con las clases .form-tip__contents. Dentro de .form-tip__contents se puede añadir un contenedor con la clase .form-tips__contents__secondary para tener un texto en gris. El texto de apoyo se visualiza al haber un hover sobre los campos.
<div class="form-group form-group--inline form-tip">
<label class="visually-hidden" for="demo-tips1">Nombre</label>
<input type="text" class="form-item" placeholder="Nombre" id="demo-tips1" aria-controls="demo-tips1-contents" aria-describedby="demo-tips1-contents">
<div class="form-tip__contents" id="demo-tips1-contents" role="tooltip" aria-hidden="true">
Nombre y Apellidos
<span class="form-tips__contents__secondary">Ej Juan Martinez</span>
</div>
</div>
<div class="form-group form-group--inline form-tip">
<label class="visually-hidden" for="demo-comp-2">Teléfono</label>
<input type="text" class="form-item" placeholder="Teléfono" id="demo-tips2" aria-controls="demo-tips2-contents" aria-describedby="demo-tips2-contents">
<div id="demo-tips2-contents" class="form-tip__contents">
Teléfono Fijo (Indicativo ciudad + nº)
<span class="form-tips__contents__secondary">Ej: 12345234 (Lima)</span>
</div>
</div>
<div class="form-group form-group--inline">
<button class="btn btn--primary" type="submit">Enviar</button>
</div>
La clase .is-form-error cambia el color del fondo de los elementos y del texto existente en los elementos internos a donde se apliquen dichas clases. Esta clase se puede añadir a un bloque o a un elemento en particular según el efecto deseado.
<div class="form-group is-form-error">
<label for="demo-error">Nombre</label>
<input type="text" class="form-item" id="demo-error" value="" aria-required="true" aria-invalid="false">
<span id="lblOption15" aria-hidden="true" class="icon icon--alert"></span>
</div>
<fieldset class="form-group">
<legend>Seleccione la opción</legend>
<div class="form-radio is-form-error">
<label for="demo-option-error">
<input type="radio" id="demo-option-error" value="" name="option-error">
<span aria-hidden="true" class="icon icon--checkbox-off icon--small"></span>
Opción con error
</label>
</div>
</fieldset>
<fieldset class="form-group">
<legend>Seleccione la opción</legend>
<div class="form-check is-form-error">
<label for="demo-check-error">
<input type="checkbox" id="demo-check-error" value="" name="check-error">
<span aria-hidden="true" class="icon icon--checkbox-off icon--small"></span>
Checkbox con error
</label>
</div>
</fieldset>
Los mensajes que se muestran fuera de los inputs deben ir envueltos en una clase .alert-container la cual tiene dos elementos hijos (.alert-container__header y .alert-container__body). En el primero se podrá poner el texto que se quiera, además de un icono configurable que saldrá en la parte superior derecha. En cuanto al .alert-container__body, se utiliza para enumerar los avisos/errores existentes mediante utilizando el componente list--compact.
<div class="alert-container" role="alert">
<div class="alert-container__header">
<span class="icon icon--alert color-error" aria-hidden="true">
<strong>Titulo de ejemplo</strong><br />
Descripcion de ejemplo
</span>
</div>
<div class="alert-container__body">
<ul class="list--compact">
<li>Texto ejemplo 1</li>
<li>Texto ejemplo 2</li>
<li>Texto ejemplo 3</li>
</ul>
<button class="btn btn--large btn--block bg-error inverse" data-modal-close>Acceptar</button>
</div>
</div>