Title Design Component

h1 - Dr. Barbara Sturm

h2 - Dr. Barbara Sturm

h3 - Dr. Barbara Sturm

h4 - Dr. Barbara Sturm

h5 - Dr. Barbara Sturm

h6 - Dr. 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>

Paragraph

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, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

<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>

Ordered Lists

Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Sed ut perspiciatis unde omnis iste natus error sit voluptatem

<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>

unordered Lists

Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Sed ut perspiciatis unde omnis iste natus error sit voluptatem

<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>

Button Design Component

primary Buttons

<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>

Primary Disabled Buttons

<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>

Secondary Buttons

<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>

Secondary Disabled Buttons

<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>

Text Box Component

Text Box

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

Radio Button Component

Radio button

radio1 radio2 radio3 radio4 radio5 <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>

vertical radio buttons

radio1 radio2 radio3 radio4 radio5 <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>

Checkbox Component

Checkbox

checkbox1 checkbox2 checkbox3 checkbox4 checkbox5 <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>

vertical checkbox buttons

checkbox1 checkbox2 checkbox3 checkbox4 checkbox5 <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>

CSS & HTML File path Details

Find the below file path in theme files:

variable css file path : assets\scss\settings\global\_variables.scss
scss path : scss\components\stencil\component-repository\component-repository.scss
HTMl file path: templates\pages\custom\page\component-repository.html