EL/MD V2 | TOKitchens

Buttons

High Priority Button

Medium Priority Button

Low Priority Button

Options Button

Options Button w/ Dropdown

Text Inputs

Input

Regular Text Input

Input + Leading Icon

Leading Icon

Input + Leading & Trailing Icons

Helpful message.

Leading & Trailing Icon

.il-search, .il-email, .il-phone, .il-location, .il-web, .il-user,is applied to .el-text-input-wrap

Input + Status

Helpful message.

Status

.valid or .invalid is applied to .el-text-input-group only. Triggers color change and trailing icon change.

Password

.password-veryweak, .password-weak, .password-ok, .password-good, .password-great applied to .el-text-input-wrap

Text Area

Select One:

Select2

Alert / Snackbar

Digital signatures must be in .PNG format with a transparent background.

Got It

Alert / Snackbar

Dialogs

Title

Save

Content

Large Dialog

Nav Tabs

Tab 1

Tab 2

Tab 3

Tab 4

Nav Tabs

Table

Status	ID	Type	Destination	Date	Options
	#69846	COO	Thailand	January 12th 2019	Timeline

<table class="table table-hover el-table-center el-table-fixed">
    <colgroup>
        <col class="el-table-col-icon">
        <col>
        <col>
        <col>
        <col>
        <col class="el-table-col-icon">
    </colgroup>
    <thead>
        <th>Status</th>
        <th class="text-center">ID</th>
        <th class="text-center">Type</th>
        <th>Destination</th>
        <th>Date</th>
        <th class="text-center">Options</th>
    </thead>
    <tbody>
        <tr>
            <td><span class="status approved"></span></td>
            <td class="text-center">#69846</td>
            <td class="text-center"><span class="chip coo">COO</span></td>                        
            <td>Thailand</td>
            <td>January 12th 2019</td>
            <td class="text-center">
                <div class="dropdown d-ib">
                    <a href="#" class="btn el-btn-options" data-toggle="dropdown"></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">
                            <i class="fas fa-fw fa-tasks"></i> Timeline</a>
                        <div class="dropdown-divider"></div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Nav Tabs

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Subtitle 1

Subtitle 2

Body 1

Body 2

Button

Caption

Overline

EL/MD v2 - TOKitchens

Filter by Status

Filter by Type