# Elements Page

### Buttons

    <!-- Solid Buttons -->
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <!-- Outline Buttons -->
    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-light">Light</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>

    <!-- Icon Buttons -->
    <button type="button" class="btn btn-primary h-45 w-45 icon-btn b-r-16">
      <i class="ti ti-video f-s-18"></i>
    </button>

    <button type="button" class="btn btn-secondary h-45 w-45 icon-btn b-r-16">
      <i class="ti ti-phone-call f-s-18"></i>
    </button>

    <button type="button" class="btn btn-outline-primary h-45 w-45 icon-btn b-r-16">
      <i class="ti ti-volume f-s-18"></i>
    </button>

    <button type="button" class="btn btn-outline-secondary h-45 w-45 icon-btn b-r-16">
      <i class="ti ti-search f-s-18"></i>
    </button>

    <button type="button" class="btn btn-light-warning h-45 w-45 icon-btn b-r-16">
      <i class="ti ti-book-2 f-s-18"></i>
    </button>

    <button type="button" class="btn btn-light-secondary h-45 w-45 icon-btn b-r-16">
      <i class="ti ti-clipboard-text f-s-18"></i>
    </button>

### Avatars

ab
ad
lm
b
3

- A
- CD
- XYZ
- 2+

- 10+

- 5+

    <!-- Single Avatars with images and text/icons -->
    <div class="d-flex gap-3 flex-wrap">
        <!-- Image avatars -->
        <div class="h-45 w-45 d-flex-center b-r-16 overflow-hidden text-bg-primary">
            <img alt="avatar" class="img-fluid" src="../assets/images/avatar/1.png">
        </div>
        <div class="h-45 w-45 d-flex-center b-r-16 overflow-hidden text-bg-secondary">
            <img alt="avatar" class="img-fluid" src="../assets/images/avatar/2.png">
        </div>
        <div class="h-45 w-45 d-flex-center b-r-16 overflow-hidden text-bg-success">
            <img alt="avatar" class="img-fluid" src="../assets/images/avatar/3.png">
        </div>
        <div class="h-45 w-45 d-flex-center b-r-16 overflow-hidden text-bg-info">
            <img alt="avatar" class="img-fluid" src="../assets/images/avatar/4.png">
        </div>
        <div class="h-45 w-45 d-flex-center b-r-16 overflow-hidden text-bg-success">
            <img alt="avatar" class="img-fluid" src="../assets/images/avatar/5.png">
        </div>

        <!-- Text avatars -->
        <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-primary">ab</div>
        <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-secondary">ad</div>
        <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-warning">lm</div>
        <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-success">b</div>

        <!-- Icon avatars -->
        <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-danger"><i class="ti ti-message-circle f-s-18"></i></div>
        <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-dark"><i class="ti ti-user f-s-18"></i></div>
        <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-primary"><i class="ti ti-video f-s-18"></i></div>
        <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-success"><i class="ti ti-volume f-s-18"></i></div>
    </div>

    <!-- Avatars with status indicators -->
    <div class="d-flex gap-3 flex-wrap mt-3">
        <span class="bg-danger h-45 w-45 d-flex-center b-r-50 position-relative">
            <i class="ti ti-user f-s-18"></i>
            <span class="position-absolute top-5 start-1 top-0 p-1 bg-danger border border-light rounded-circle"></span>
        </span>
        <span class="bg-success h-45 w-45 d-flex-center b-r-50 position-relative">
            <i class="ti ti-user f-s-18"></i>
            <span class="position-absolute bottom-0 start-1 p-1 bg-success border border-light rounded-circle"></span>
        </span>
        <span class="bg-warning h-45 w-45 d-flex-center b-r-50 position-relative">
            <i class="ti ti-user f-s-18"></i>
            <span class="position-absolute bottom-0 end-0 p-1 bg-warning border border-light rounded-circle"></span>
        </span>
        <span class="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
            <img alt="avatar" class="img-fluid b-r-50" src="../assets/images/avatar/1.png">
            <span class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
        </span>
    </div>

    <!-- Avatar groups with images, text, and indicators -->
    <div class="d-flex gap-3 flex-wrap mt-3">
        <ul class="avatar-group">
            <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary">
                <img alt="avatar" class="img-fluid" src="../assets/images/avatar/4.png">
            </li>
            <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success" data-bs-title="Lennon Briggs" data-bs-toggle="tooltip">
                <img alt="avatar" class="img-fluid" src="../assets/images/avatar/5.png">
            </li>
            <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger" data-bs-title="Maya Horton" data-bs-toggle="tooltip">
                <img alt="avatar" class="img-fluid" src="../assets/images/avatar/6.png">
            </li>
        </ul>

        <!-- Text avatars -->
        <ul class="avatar-group">
            <li class="text-bg-primary h-45 w-45 d-flex-center b-r-50" data-bs-title="Athena Stewart" data-bs-toggle="tooltip"><i class="ti ti-user f-s-18"></i></li>
            <li class="text-bg-secondary h-45 w-45 d-flex-center b-r-50" data-bs-title="Connor Collins" data-bs-toggle="tooltip"><i class="ti ti-user f-s-18"></i></li>
            <li class="text-bg-success h-45 w-45 d-flex-center b-r-50" data-bs-title="Raiden Simpson" data-bs-toggle="tooltip"><i class="ti ti-user f-s-18"></i></li>
        </ul>
    </div>

### Badges

seen fail Deliver 4 6+ 8+
Primary Secondary Success Danger Warning Info Dark

    <!-- Badge Examples -->
    <div class="d-flex align-items-center gap-3 flex-wrap">
        <!-- Status badges -->
        <span class="replay-status seen">seen</span>
        <span class="replay-status fail">fail</span>
        <span class="replay-status deliver">Deliver</span>

        <!-- Number badges -->
        <span class="badge tag-badge bg-warning rounded">4</span>
        <span class="badge tag-badge bg-primary rounded">6+</span>
        <span class="badge tag-badge bg-success rounded">8+</span>
    </div>

    <div class="d-flex gap-2 flex-wrap mt-3">
        <!-- Standard colored badges -->
        <span class="badge bg-primary"><i class="ti ti-download me-1"></i>Primary</span>
        <span class="badge bg-secondary">Secondary</span>
        <span class="badge bg-success">Success</span>
        <span class="badge bg-danger">Danger</span>
        <span class="badge bg-warning">Warning</span>
        <span class="badge bg-info">Info</span>
        <span class="badge bg-dark">Dark</span>
    </div>

    <div class="d-flex gap-3 flex-wrap mt-3">
        <!-- Icon buttons with animated badge indicators -->
        <a class="position-relative bg-primary p-2 d-flex-center b-r-10" href="#">
            <i class="ti ti-shopping-cart f-s-18"></i>
            <span class="position-absolute top-0 start-100 translate-middle p-1 bg-primary rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
        </a>

        <a class="position-relative bg-secondary p-2 d-flex-center b-r-10" href="#">
            <i class="ti ti-line-dashed f-s-18"></i>
            <span class="position-absolute top-0 start-100 translate-middle p-1 bg-secondary rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
        </a>

        <a class="position-relative bg-success p-2 d-flex-center b-r-10" href="#">
            <i class="ti ti-speakerphone f-s-18"></i>
            <span class="position-absolute top-0 start-100 translate-middle p-1 bg-success rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
        </a>

        <a class="position-relative bg-danger p-2 d-flex-center b-r-10" href="#">
            <i class="ti ti-mail f-s-18"></i>
            <span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
        </a>

        <a class="position-relative bg-dark p-2 d-flex-center b-r-10" href="#">
            <i class="ti ti-moon-filled f-s-18"></i>
            <span class="position-absolute top-0 start-100 translate-middle p-1 bg-dark rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
        </a>
    </div>

    <div class="d-flex gap-4 flex-wrap mt-3">
        <!-- Buttons with notification badges -->
        <button class="btn btn-primary" type="button">
            Notifications <span class="badge bg-light-white badge-notification">4</span>
        </button>

        <button class="btn btn-success position-relative" type="button">
            Inbox
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-white badge-notification">
                99+
                <span class="visually-hidden">unread messages</span>
            </span>
        </button>

        <button class="btn btn-danger position-relative" type="button">
            Unread
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-white badge-notification">
                <i class="ti ti-bell-ringing"></i>
            </span>
        </button>

        <button class="btn btn-outline-warning position-relative" type="button">
            Inbox
            <span class="badge rounded-pill bg-warning badge-notification">
                99+
                <span class="visually-hidden">unread messages</span>
            </span>
        </button>

        <button class="btn btn-info position-relative f-s-14" type="button">
            <b>50%</b> Off
            <span class="position-absolute top-0 start-100 translate-middle bg-info b-r-6 badge-notification p-1 f-s-12">
                New
            </span>
        </button>

        <button class="btn btn-dark position-relative" type="button">
            <b>1</b> missed call
            <span class="position-absolute top-0 start-100 translate-middle p-2 bg-dark border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower">
                <span class="visually-hidden">Busy</span>
            </span>
        </button>
    </div>

### Text

- .text-primary - .text-secondary - .text-success - .text-danger - .text-warning - .text-info - .text-light - .text-dark
- .txt-bg-primary - .txt-bg-secondary - .txt-bg-success - .txt-bg-danger - .txt-bg-warning - .txt-bg-info - .txt-bg-light - .txt-bg-dark
-link-primary -link-secondary -link-success -link-danger -link-warning - link-info -link-light -link-dark

    <!-- Text Colors -->
    <div class="d-flex flex-wrap gap-2 mt-3">
        <span class="text-primary p-2"> - .text-primary</span>
        <span class="text-secondary p-2"> - .text-secondary</span>
        <span class="text-success p-2"> - .text-success</span>
        <span class="text-danger p-2"> - .text-danger</span>
        <span class="text-warning p-2"> - .text-warning</span>
        <span class="text-info p-2"> - .text-info</span>
        <span class="text-light p-2"> - .text-light</span>
        <span class="text-dark p-2"> - .text-dark</span>
    </div>

    <!-- Text Background Colors -->
    <div class="d-flex flex-wrap gap-2 mt-3">
        <span class="txt-bg-primary p-2 b-r-22"> - .txt-bg-primary</span>
        <span class="txt-bg-secondary p-2 b-r-22"> - .txt-bg-secondary</span>
        <span class="txt-bg-success p-2 b-r-22"> - .txt-bg-success</span>
        <span class="txt-bg-danger p-2 b-r-22"> - .txt-bg-danger</span>
        <span class="txt-bg-warning p-2 b-r-22"> - .txt-bg-warning</span>
        <span class="txt-bg-info p-2 b-r-22"> - .txt-bg-info</span>
        <span class="txt-bg-light text-dark p-2 b-r-22"> - .txt-bg-light</span>
        <span class="txt-bg-dark p-2 b-r-22"> - .txt-bg-dark</span>
    </div>

    <!-- Text Links -->
    <div class="d-flex flex-wrap gap-2 mt-3">
        <span class="p-2">-<a class="text-decoration-underline link-primary" href="#">link-primary</a></span>
        <span class="p-2">-<a class="text-decoration-underline link-secondary" href="#">link-secondary</a></span>
        <span class="p-2">-<a class="text-decoration-underline link-success" href="#">link-success</a></span>
        <span class="p-2">-<a class="text-decoration-underline link-danger" href="#">link-danger</a></span>
        <span class="p-2">-<a class="text-decoration-underline link-warning" href="#">link-warning</a></span>
        <span class="p-2">-<a class="text-decoration-underline link-info" href="#">link-info</a></span>
        <span class="p-2">-<a class="text-decoration-underline link-light" href="#">link-light</a></span>
        <span class="p-2">-<a class="text-decoration-underline link-dark" href="#">link-dark</a></span>
    </div>

### Font Size

h1 Fontsize
h2 Fontsize
h3 Fontsize
h4 Fontsize
h5 Fontsize
h6 Fontsize

    <!-- Font Size Examples -->
    <div class="h1">h1 Fontsize</div>
    <div class="h2">h2 Fontsize</div>
    <div class="h3">h3 Fontsize</div>
    <div class="h4">h4 Fontsize</div>
    <div class="h5">h5 Fontsize</div>
    <div class="h6">h6 Fontsize</div>

### Font Weight

- Font weightf-fw-300*
- Font weightf-fw-400*
- Font weightf-fw-500*
- Font weightf-fw-600*
- Font weightf-fw-700*
- Font weightf-fw-800*
- Font weightf-fw-900*

    <!-- Font Weight Examples -->
    <div class="p-2">- Font weight <span class="f-fw-300 ms-2">f-fw-300* </span></div>
    <div class="p-2">- Font weight <span class="f-fw-400 ms-2">f-fw-400* </span></div>
    <div class="p-2">- Font weight <span class="f-fw-500 ms-2">f-fw-500* </span></div>
    <div class="p-2">- Font weight <span class="f-fw-600 ms-2">f-fw-600* </span></div>
    <div class="p-2">- Font weight <span class="f-fw-700 ms-2">f-fw-700* </span></div>
    <div class="p-2">- Font weight <span class="f-fw-800 ms-2">f-fw-800* </span></div>
    <div class="p-2">- Font weight <span class="f-fw-900 ms-2">f-fw-900* </span></div>

### Tabs

    <!-- Tabs Examples -->

    <ul class="nav nav-tabs line-tabs-primary" id="basicLinesTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="linesTabData1" data-bs-toggle="tab" data-bs-target="#linesTabData1-pane" type="button" role="tab" aria-controls="linesTabData1" aria-selected="true">Tab 1</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="linesTabData2" data-bs-toggle="tab" data-bs-target="#linesTabData2-pane" type="button" role="tab" aria-controls="linesTabData2" aria-selected="false">Tab 2</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="linesTabData3" data-bs-toggle="tab" data-bs-target="#linesTabData3-pane" type="button" role="tab" aria-controls="linesTabData3" aria-selected="false">Tab 3</button>
        </li>
    </ul>

    <ul class="nav nav-tabs app-tabs-primary" id="basicTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="tabData1" data-bs-toggle="tab" data-bs-target="#tabData1-pane" type="button" role="tab" aria-controls="tabData1" aria-selected="true">Tab 1</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tabData2" data-bs-toggle="tab" data-bs-target="#tabData2-pane" type="button" role="tab" aria-controls="tabData2" aria-selected="false">Tab 2</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tabData3" data-bs-toggle="tab" data-bs-target="#tabData3-pane" type="button" role="tab" aria-controls="tabData3" aria-selected="false">Tab 3</button>
        </li>
    </ul>

    <ul class="nav nav-tabs tab-outline-secondary" id="basicOutlineTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tabOutlineData1" data-bs-toggle="tab" data-bs-target="#tabOutlineData1-pane" type="button" role="tab" aria-controls="tabOutlineData1" aria-selected="false">Tab 1</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="tabOutlineData2" data-bs-toggle="tab" data-bs-target="#tabOutlineData2-pane" type="button" role="tab" aria-controls="tabOutlineData2" aria-selected="true">Tab 2</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tabOutlineData3" data-bs-toggle="tab" data-bs-target="#tabOutlineData3-pane" type="button" role="tab" aria-controls="tabOutlineData3" aria-selected="false">Tab 3</button>
        </li>
    </ul>

    <ul class="nav nav-tabs tab-light-success mb-0" id="basicLightTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tabLightData1" data-bs-toggle="tab" data-bs-target="#tabLightData1-pane" type="button" role="tab" aria-controls="tabLightData1" aria-selected="false">Tab 1</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tabLightData2" data-bs-toggle="tab" data-bs-target="#tabLightData2-pane" type="button" role="tab" aria-controls="tabLightData2" aria-selected="false">Tab 2</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="tabLightData3" data-bs-toggle="tab" data-bs-target="#tabLightData3-pane" type="button" role="tab" aria-controls="tabLightData3" aria-selected="true">Tab 3</button>
        </li>
    </ul>

### Massage Variant

###### Missed video call

Tab to call back

###### Voice call

05 Min

###### Missed voice call

Tab to call back

###### Voice call

05 Min

###### Project_Proposal.pdf

2.3MB

###### Team_Meeting_Notes.docx

1.1MB

###### Sales_Report_Q1.xlsx

850KB

###### App_Design.sketch

4.7MB

###### Wireframe_UI.fig

3.5MB

05:12

Product launch teaser

https://www.youtube.com/watch?v=dQw4w9WgXcQ
2+

### Simple Massage

- Jerry Smith

  09:30AM

  ###### Hi! Just wanted to confirm our meeting is still on at 2 PM?

- Jerry Smith

  09:30AM

  ###### Yes, absolutely. I'll be there on time with the presentation ready.

### Group Massage

- Jerry Smith

  09:15AM

  ###### Hey team! Just a quick reminder, we have a call at 3 PM to review MVP features.

- Emma Johnson

  09:18AM

  ###### Thanks for the reminder! I’ve updated the task list for the meeting.

- Liam Carter

  09:21AM

  ###### I’ll join from the airport lounge, so my connection might be a bit spotty.

### Massage With Options

- Jerry Smith

  09:30AM

  ###### Good morning! I hope you're having a great day so far.

### Form Elements

Static Text
Hello !... This is static text
Default Input
Email
Password
URL
Telephone
Number
Maximum Length
Date & Time
Date
Time
File
Search
Textarea