Typography

Text Styles

u-text-style-display

Heading

u-text-style-h1

Heading

u-text-style-h2

Heading

u-text-style-h3

Heading

u-text-style-h4

Heading

u-text-style-h5
Heading
u-text-style-h6
Heading
u-text-style-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-main

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Weights

u-weight-regular

Lorem ipsum dolor

u-weight-medium

Lorem ipsum dolor

u-weight-bold

Lorem ipsum dolor

Line Clamp

u-line-clamp-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Alignment Modes

u-alignment-start

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alignment-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alignment-end

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Transform

u-text-transform-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-uppercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Wrap

u-text-wrap-default

Normal text wrapping. Useful for resetting text wrapping on a child if the parent has balance or pretty.

u-text-wrap-balance

Keeps the line width even and consistent for up to six lines of text. Ideal for short form content.

u-text-wrap-pretty

Ensures there's more than one word on the last line of text. Ideal for long form content.

Typography Elements

u-rich-text

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Figure
Ordered List
  1. Ordered list
  2. when not inside
  3. of rich text
    Bold Text

    asdas

    1. Ordered list
    2. when inside
    3. of rich text
    Unordered List
    • Unordered list
    • when not inside
    • of rich text
    • Unordered list
    • when inside
    • of rich text
    Block Quotes
    Block quote when not inside of a rich text element
    Block quote when inside of a rich text element

    Color

    Themes

    u-theme-inherit

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

    Button Text
    Button Text
    u-theme-light

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

    Button Text
    Button Text
    u-theme-dark

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

    Button Text
    Button Text

    Text Color

    u-color-inherit

    Lorem ipsum dolor

    u-color-faded

    Lorem ipsum dolor

    Background Color

    u-background-transparent

    Lorem ipsum dolor

    u-background-1

    Lorem ipsum dolor

    u-background-2

    Lorem ipsum dolor

    Flexbox

    Flex Direction Utilities

    u-flex-horizontal-wrap
    u-flex-vertical-nowrap
    u-flex-horizontal-nowrap
    u-flex-vertical-wrap

    Align Self Utilities

    u-align-self-variable
    u-align-self-start
    u-align-self-center
    u-align-self-end
    u-align-self-stretch

    Align Items Utilities

    u-align-items-variable
    u-align-items-start
    u-align-items-center
    u-align-items-end
    u-align-items-stretch

    Justify Content Utilities

    u-justify-content-variable
    u-justify-content-start
    u-justify-content-center
    u-justify-content-end
    u-justify-content-between
    u-justify-content-around

    Flex Basis Utilities

    u-flex-shrink
    u-flex-grow
    u-flex-noshrink

    Grid

    Grid Utilities

    u-grid-autofit
    u-grid-autofill
    u-grid-above
    u-grid-below
    u-grid-custom
    u-grid-breakout
    u-grid-subgrid
    u-grid-flex

    Column Utilities

    u-column-custom
    u-column-full
    u-column-indent
    u-column-1
    u-column-2
    u-column-3
    u-column-4
    u-column-5
    u-column-6
    u-column-7
    u-column-8
    u-column-9
    u-column-10
    u-column-11
    u-column-12

    Order Utilities

    u-order-first
    u-order-last
    u-order-unset-above
    u-order-unset-below

    Sizes

    Gap Utilities

    u-gap-inherit
    u-gap-gutter
    u-gap-0
    u-gap-1
    u-gap-2
    u-gap-3
    u-gap-4
    u-gap-5
    u-gap-6
    u-gap-7
    u-gap-8

    Row Gap Utilities

    u-gap-row-inherit
    u-gap-row-gutter
    u-gap-row-0
    u-gap-row-1
    u-gap-row-2
    u-gap-row-3
    u-gap-row-4
    u-gap-row-5
    u-gap-row-6
    u-gap-row-7
    u-gap-row-8

    Margin Top Utilities

    u-mt-auto
    u-mt-gutter
    u-mt-text
    u-mt-0
    u-mt-1
    u-mt-2
    u-mt-3
    u-mt-4
    u-mt-5
    u-mt-6
    u-mt-7
    u-mt-8

    Margin Bottom Utilities

    u-mb-auto
    u-mb-gutter
    u-mb-text
    u-mb-0
    u-mb-1
    u-mb-2
    u-mb-3
    u-mb-4
    u-mb-5
    u-mb-6
    u-mb-7
    u-mb-8

    Border Radius Utilities

    u-radius-none
    u-radius-inherit
    u-radius-small
    u-radius-main
    u-radius-round

    Aspect Ratio Utilities

    u-ratio-2-1
    u-ratio-16-9
    u-ratio-3-2
    u-ratio-1-1
    u-ratio-2-3

    Miscellaneous

    Display Utilities

    u-display-block
    u-display-inline-block
    u-display-inline-flex
    u-display-inline-grid
    u-display-inline
    u-display-contents
    u-display-none
    u-hide-if-empty
    u-hide-if-empty-cms

    Overflow Utilities

    u-overflow-visible
    u-overflow-hidden
    u-overflow-clip
    u-overflow-x-auto
    u-overflow-y-auto
    u-overflow-hidden-left

    Z-Index Utilities

    u-zindex-negative
    u-zindex-0
    u-zindex-unset
    u-zindex-1
    u-zindex-2
    u-zindex-3

    Position Utilities

    u-position-static
    u-position-relative
    u-position-absolute
    u-position-fixed
    u-position-sticky

    Max Width Utilities

    u-max-width-none
    u-max-width-10ch
    u-max-width-12ch
    u-max-width-14ch
    u-max-width-16ch
    u-max-width-18ch
    u-max-width-20ch
    u-max-width-30ch
    u-max-width-40ch
    u-max-width-50ch
    u-max-width-60ch
    u-max-width-70ch
    u-max-width-80ch

    Other Utilities

    u-all-unset-above
    u-all-unset-below
    u-text-trim-off
    u-btn-group
    u-child-contain
    u-margin-inline-auto
    u-margin-trim
    u-pointer-on
    u-pointer-off
    u-min-height-screen
    u-max-width-none
    u-width-full
    u-height-full
    u-cover
    u-cover-absolute
    u-visual-wrap
    u-container
    u-container-small
    u-container-full
    u-sr-only

    Components

    Buttons

    Primary Button Style
    Button Text
    Play
    Secondary Button Style
    Button Text
    Play

    Icons

    Global & Starter

    Eyebrow Text Here

    แพทย์หญิงธมนวรรณ พันธุ์ประเสริฐ

    (คุณหมอปราง)

    เทคโนโลยีการยกกระชับผิวที่ใช้คลื่นเสียงความถี่สูง (HIFU – High Intensity Focused Ultrasound) เป็นการรักษาที่ไม่ต้องผ่าตัด ความปลอดภัยสูง โดยใช้คลื่นเสียงกระตุ้นการสร้างคอลลาเจนใหม่ในผิวหนัง ซึ่งช่วยยกกระชับผิวและลดริ้วรอยได้อย่างมีประสิทธิภาพ

    ‍

    ไฮไลท์/สูตร/เทคนิคพิเศษของเรายังไง

    คุณหมอมีประสบการณ์ในการยิงยกกระชับเทียบเท่าการผ่าตัด ยิงแม่นทุกพลังงานที่ลง อีกทั้งเทคนิคการยิงที่คิดค้นขึ้นเพื่อให้มีความเจ็บน้อยระหว่างทำหัตถการ

    ‍

    Eyebrow Text Here

    Lorem ipsum dolor sit amet elit

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

    Unordered list

    • Item A
    • Item B
    • Item C
    Button Text
    Button Text

    Form

    Select all that apply
    Choose your favorite color
    Submit
    Thank you! Your submission has been received!
    Oops! Something went wrong while submitting the form.
    Select all that apply
    Choose your favorite color
    Submit
    Thank you! Your submission has been received!
    Oops! Something went wrong while submitting the form.