Skip to main content
Close

required
required
First name is required
required
Last name is required

I would like to receive skincare tips, expert advice and exclusive offers:

By registering, you agree to the Terms & Conditions of Use, confirm that you have read our Privacy Policy and that you are of legal age.

Please tick recaptcha.
Close

  • Wishlist
  • Contact Us
Explore
close
Book a treatment
close
En (English)
close

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

  1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  2. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  4. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  5. 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

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

Radio Button Component

Radio button

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

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