Componente de diseño del título

h1 - Dra. Barbara Sturm

h2 - Dra. Barbara Sturm

h3 - Dra. Barbara Sturm

h4 - Dra. Barbara Sturm

h5 - Dra. Barbara Sturm

h6 - Dra. Barbara Sturm

<h1>h1 - Dr. Barbara Sturm</h1> <h2>h2 - Dr. Barbara Sturm</h2> <h3>h3 - Dr. Barbara Sturm</h3> <h4>h4 - Dr. Barbara Sturm</h4> <h5>h5 - Dr. Barbara Sturm</h5> <h6>h6 - Dr. Barbara Sturm</h6>

Párrafo

Pero para que comprendáis de dónde proviene todo este error, que acusa al placer y alaba al dolor, voy a desentrañar el asunto por completo y explicaros aquello que fue dictado por aquel inventor de la verdad y, por así decirlo, arquitecto de la vida feliz. Ningún hombre, en efecto, odia, rechaza o huye del placer por ser placer en sí mismo, sino porque de él se derivan grandes dolores para aquellos que, por falta de juicio, no saben cómo perseguir el placer. Y tampoco hay nadie que, por ser dolor, ame el dolor mismo, lo acepte o desee obtenerlo, sino porque a veces se dan circunstancias tales que, a través del trabajo y el dolor, se busca un gran placer. ¿Acaso, para ser sinceros, quién de nosotros se somete a la laboriosa tarea de ejercitar el cuerpo, si no es para obtener algún beneficio de ello? ¿Y quién reprendería con razón a quien desea disfrutar de ese placer sin sufrir molestias, o a quien huye del dolor porque no encuentra en él ningún placer equivalente?

<p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur. </p>

Listas ordenadas

Pero para que podáis comprender de dónde proviene todo este error, es un placer
Pero para que podáis comprender de dónde proviene todo este error, es un placer
Pero para que podáis comprender de dónde proviene todo este error, es un placer
Pero para que podáis comprender de dónde proviene todo este error, es un placer
Pero para que podáis comprender de dónde proviene todo este error, es un placer

<ol> <li class="order-list">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li> <li class="order-list">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li> <li class="order-list">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li> <li class="order-list">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li> <li class="order-list">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li> </ol>

Listas sin ordenar

Pero para que podáis comprender de dónde proviene todo este error, es un placer
Pero para que podáis comprender de dónde proviene todo este error, es un placer
Pero para que podáis comprender de dónde proviene todo este error, es un placer
Pero para que podáis comprender de dónde proviene todo este error, es un placer
Pero para que podáis comprender de dónde proviene todo este error, es un placer

<ul> <li class="unorder-list">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li> <li class="unorder-list">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li> <li class="unorder-list">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li> <li class="unorder-list">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li> <li class="unorder-list">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li> </ul>

Componente de diseño de botones

Botones principales

<button class="button button--primary dbs-button--primary btn-large">Label</button> <button class="button button--primary dbs-button--primary btn-medium">Label</button> <button class="button button--primary dbs-button--primary btn-small">Label</button> <button class="button button--primary dbs-button--primary btn-x-small">Label</button>

Botones desactivados principales

<button class="button button--primary dbs-button--primary button--disabled btn-large">Label</button> <button class="button button--primary dbs-button--primary button--disabled btn-medium">Label</button> <button class="button button--primary dbs-button--primary button--disabled btn-small">Label</button> <button class="button button--primary dbs-button--primary button--disabled btn-x-small">Label</button>

Botones secundarios

<button class="button dbs-button--Secondary btn-large">Label</button> <button class="button dbs-button--Secondary btn-medium">Label</button> <button class="button dbs-button--Secondary btn-small">Label</button> <button class="button dbs-button--Secondary btn-x-small">Label</button>

Botones desactivados secundarios

<button class="button dbs-button--Secondary button--disabled btn-large">Label</button> <button class="button dbs-button--Secondary button--disabled btn-medium">Label</button> <button class="button dbs-button--Secondary button--disabled btn-small">Label</button> <button class="button dbs-button--Secondary button--disabled btn-x-small">Label</button>

Componente de cuadro de texto

Cuadro de texto

Buscar producto: <label class="form-label">Search Product:</label> <input class="form-input" placeholder="Search Product">

Componente de botón de opción

Botón de opción

radio1 Radio 2 Radio 3 Radio 4 Radio 5 <input type="radio" class="form-radio" name="radio" id="comp-radio1"> <label class="form-label" for="comp-radio1">radio1</label> <input type="radio" class="form-radio" name="radio" id="comp-radio2"> <label class="form-label" for="comp-radio2">radio2</label> <input type="radio" class="form-radio" id="comp-radio3" name="radio"> <label class="form-label" for="comp-radio3">radio3</label> <input type="radio" class="form-radio" id="comp-radio4" name="radio"> <label class="form-label" for="comp-radio4">radio4</label> <input type="radio" class="form-radio" id="comp-radio5" name="radio"> <label class="form-label" for="comp-radio5">radio5</label>

botones de opción verticales

radio1 Radio 2 Radio 3 Radio 4 Radio 5 <input type="radio" class="form-radio" name="radio" id="v-comp-radio1"> <label class="form-label verical-view" for="v-comp-radio1">radio1</label> <input type="radio" class="form-radio" name="radio" id="v-comp-radio2"> <label class="form-label verical-view" for="v-comp-radio2">radio2</label> <input type="radio" class="form-radio" id="v-comp-radio3" name="radio"> <label class="form-label verical-view" for="v-comp-radio3">radio3</label> <input type="radio" class="form-radio" id="v-comp-radio4" name="radio"> <label class="form-label verical-view" for="v-comp-radio4">radio4</label> <input type="radio" class="form-radio" id="v-comp-radio5" name="radio"> <label class="form-label verical-view" for="v-comp-radio5">radio5</label>

Componente de casilla de selección

Casilla de verificación

casilla de verificación 1 casilla de verificación 2 casilla de verificación 3 casilla de verificación 4 casilla de verificación 5 <input type="checkbox" class="form-checkbox" id="comp-checkbox1"> <label class="form-label" for="comp-checkbox1">checkbox1</label> <input type="checkbox" class="form-checkbox" id="comp-checkbox2"> <label class="form-label" for="comp-checkbox2">checkbox2</label> <input type="checkbox" class="form-checkbox" id="comp-checkbox3"> <label class="form-label" for="comp-checkbox3">checkbox3</label> <input type="checkbox" class="form-checkbox" id="comp-checkbox4"> <label class="form-label" for="comp-checkbox4">checkbox4</label> <input type="checkbox" class="form-checkbox" id="comp-checkbox5"> <label class="form-label" for="comp-checkbox5">checkbox5</label>

casillas de verificación verticales

casilla de verificación 1 casilla de verificación 2 casilla de verificación 3 casilla de verificación 4 casilla de verificación 5 <input type="checkbox" class="form-checkbox" id="v-comp-checkbox1"> <label class="form-label verical-view" for="v-comp-checkbox1">checkbox1</label> <input type="checkbox" class="form-checkbox" id="v-comp-checkbox2"> <label class="form-label verical-view" for="v-comp-checkbox2">checkbox2</label> <input type="checkbox" class="form-checkbox" id="v-comp-checkbox3"> <label class="form-label verical-view" for="v-comp-checkbox3">checkbox3</label> <input type="checkbox" class="form-checkbox" id="v-comp-checkbox4"> <label class="form-label verical-view" for="v-comp-checkbox4">checkbox4</label> <input type="checkbox" class="form-checkbox" id="v-comp-checkbox5"> <label class="form-label verical-view" for="v-comp-checkbox5">checkbox5</label>

Detalles de la ruta de los archivos CSS y HTML

Busca la siguiente ruta de archivo en los archivos del tema:

Ruta del archivo CSS de variables: assets\scss\settings\global\_variables.scss
Ruta de SCSS: scss\components\stencil\component-repository\component-repository.scss
Ruta del archivo HTML: templates\pages\custom\page\component-repository.html