Materia X2 - Components (Manual Mode)

Get started with over a dozen reusable Materia X2 components with enhancement styles and additional components and options.

Built in Components

Built-in Components in the Materia X2 theme are actually HTML components or elements that have their styling and class names set so they can be reused.

Accordion/Collapsible

The accordion component is a collection of vertically collapsing header and body elements that can be used to show and hide information.

A popular use case would be the "Frequently Asked Questions" section of a website or page when you can show questions and answers for each child element.

Default Accordion/Collapsible

Here's an example of an Accordion:

Use the example below to create an Accordion:

<div class="elcreative_accordion">
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 1 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 2 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 3 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 4 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
</div>

Accordion/Collapsible Panel Always-Open

Here's an example of an always-open Accordion:

Add a active class to the accordion_button and accordion_content to keep accordion opened.

Use the example below to create an always-open Accordion:

<div class="elcreative_accordion">
    <div class="accordion_panel">
        <button class="accordion_button active" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 1 - Click Me!</strong></button>
        <div class="accordion_content active">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button active" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 2 - Click Me!</strong></button>
        <div class="accordion_content active">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button active" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 3 - Click Me!</strong></button>
        <div class="accordion_content active">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button active" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 4 - Click Me!</strong></button>
        <div class="accordion_content active">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
</div>

Accordion/Collapsible Panel Flush

Here's an example of an Flushed Accordion:

Add a accordion_flush class to the elcreative_accordion to remove the background color, shadow and rounded borders from the accordion component.

Use the example below to create an Flushed Accordion:

<div class="elcreative_accordion accordion_flush">
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 1 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 2 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 3 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 4 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
</div>

Accordion/Collapsible Panel Escape (ESC) Key Support

Collapsible or Accordion Panel that supports the Escape key on the Keyboard (Press the ESC key on the Keyboard, the Accordion will close).

Here's an example of an Accordion with Escape Key Support:

You just need to add the data-toggle-escape attribute to the button which has class accordion_button.

Use the example below to create an Accordion with Escape Key Support:

<div class="elcreative_accordion">
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-escape="" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 1 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-escape="" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 2 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-escape="" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 3 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-escape="" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 4 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
</div>

Accordion/Collapsible Panel Auto-Collapse

Collapsible or Accordion Panel that supports auto-collapse (The panel will automatically collapse if another panel is open).

Here's an example of an Accordion with auto-collapse:

Add a unique id to each button accordion_button and accordion_content.

Next, you also need to add the data-toggle-target-parent attribute whose value is the id of the accordion_content and add the data-toggle-group attribute whose value is the group name of the accordion.

Use the example below to create an Accordion with auto-collapse:

<div class="elcreative_accordion">
    <div class="accordion_panel">
        <button id="button_panel_1" class="accordion_button" type="button" data-toggle-target-parent="#panel_1" data-toggle-group="accordion" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 1 - Click Me!</strong></button>
        <div id="panel_1" class="accordion_content" aria-labelledby="button_panel_1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
    </div>
    <div class="accordion_panel">
        <button id="button_panel_2" class="accordion_button" type="button" data-toggle-target-parent="#panel_2" data-toggle-group="accordion" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 2 - Click Me!</strong></button>
        <div id="panel_2" class="accordion_content" aria-labelledby="button_panel_2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
    </div>
    <div class="accordion_panel">
        <button id="button_panel_3" class="accordion_button" type="button" data-toggle-target-parent="#panel_3" data-toggle-group="accordion" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 3 - Click Me!</strong></button>
        <div id="panel_3" class="accordion_content" aria-labelledby="button_panel_3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
    </div>
    <div class="accordion_panel">
        <button id="button_panel_3" class="accordion_button" type="button" data-toggle-target-parent="#panel_4" data-toggle-group="accordion" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 4 - Click Me!</strong></button>
        <div id="panel_4" class="accordion_content" aria-labelledby="button_panel_4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
    </div>
</div>

Nesting Accordion/Collapsible

Accordion or Collapsible Panels can be nested. All of the mentioned options are supported.

<div class="elcreative_accordion">
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 1 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <div class="elcreative_accordion">
                <div class="accordion_panel">
                    <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 1 - Click Me!</strong></button>
                    <div class="accordion_content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
                <div class="accordion_panel">
                    <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 2 - Click Me!</strong></button>
                    <div class="accordion_content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
                <div class="accordion_panel">
                    <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 3 - Click Me!</strong></button>
                    <div class="accordion_content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
                <div class="accordion_panel">
                    <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 4 - Click Me!</strong></button>
                    <div class="accordion_content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion_panel">
        <button class="accordion_button" type="button" data-toggle-class="active" data-toggle-target-next=""><strong>Collapse 2 - Click Me!</strong></button>
        <div class="accordion_content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
</div>

Alerts

The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.

We also includes dismissable alerts which can be hidden by the users by clicking on the close icon.

Default Alert

Use the following examples of alert components to show messages as feedback to your users.

<div class="elcreative_alert">
    <p><strong>Alert!</strong> Change a few things up and try submitting again.</p>
</div>
<div class="elcreative_alert alert_info">
    <p><strong>Info alert!</strong> Change a few things up and try submitting again.</p>
</div>
<div class="elcreative_alert alert_success">
    <p><strong>Success alert!</strong> Change a few things up and try submitting again.</p>
</div>
<div class="elcreative_alert alert_warning">
    <p><strong>Warning alert!</strong> Change a few things up and try submitting again.</p>
</div>
<div class="elcreative_alert alert_error">
    <p>Error alert! Change a few things up and try submitting again.</p>
</div>

Outlined Alert

Use this example to add a border accent to the alert component instead of just a plain background.

<div class="elcreative_alert alert_outline">
    <p><strong>Alert!</strong> Change a few things up and try submitting again.</p>
</div>
<div class="elcreative_alert alert_outline alert_info">
    <p><strong>Info alert!</strong> Change a few things up and try submitting again.</p>
</div>
<div class="elcreative_alert alert_outline alert_success">
    <p><strong>Success alert!</strong> Change a few things up and try submitting again.</p>
</div>
<div class="elcreative_alert alert_outline alert_warning">
    <p><strong>Warning alert!</strong> Change a few things up and try submitting again.</p>
</div>
<div class="elcreative_alert alert_outline alert_error">
    <p><strong>Error alert!</strong> Change a few things up and try submitting again.</p>
</div>

Alerts with Additional Content

Alerts can also contain additional HTML elements like headings, paragraphs, dividers, etc:

<div class="elcreative_alert alert_info">
    <p><strong>Ensure that these requirements are met:</strong></p>
    <ul>
        <li>At least 10 characters (and up to 100 characters)</li>
        <li>At least one lowercase character</li>
        <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
    </ul>
</div>
<div class="elcreative_alert alert_outline alert_success">
    <p><strong>Ensure that these requirements are met:</strong></p>
    <ul>
        <li>At least 10 characters (and up to 100 characters)</li>
        <li>At least one lowercase character</li>
        <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
    </ul>
</div>
<div class="elcreative_alert alert_warning">
    <p><strong>Well done!</strong></p>
    <p>Oh yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
    <hr />
    <p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
<div class="elcreative_alert alert_outline alert_error">
    <p><strong>Well done!</strong></p>
    <p>Oh yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
    <hr />
    <p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Buttons

The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.

We provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.

Default Button

Use these default button to indicate an action or link within your website.

Button Default Button Outlined Button Unelevated Button Raised

You can add elcreative_button class to the element.

• Add outlined class to the element if you want to make Outlined button style.
• Add unelevated class to the element if you want to make Unelevated button style.
• Add raised class to the element if you want to make Raised button style.

<a href="#" class="elcreative_button">Button Default</a>
<a href="#" class="elcreative_button outlined">Button Outlined</a>
<a href="#" class="elcreative_button unelevated">Button Unelevated</a>
<a href="#" class="elcreative_button raised">Button Raised</a>

Button Rounded

The button rounded can be used as an alternative style by using fully rounded edges.

Button Default Button Outlined Button Unelevated Button Raised

You can add rounded class to the element.

<a href="#" class="elcreative_button rounded">Button Default</a>
<a href="#" class="elcreative_button rounded outlined">Button Outlined</a>
<a href="#" class="elcreative_button rounded unelevated">Button Unelevated</a>
<a href="#" class="elcreative_button rounded raised">Button Raised</a>

Button with Colors

Use these default button styles with multiple colors to indicate an action or link within your website.

Button Info Default Button Success Outlined Button Warning Unelevated Button Error Raised

• Add button_info class to the element if you want to make Info button style.
• Add button_success class to the element if you want to make Success button style.
• Add button_warning class to the element if you want to make Warning button style.
• Add button_error class to the element if you want to make Error button style.

<a href="#" class="elcreative_button button_info">Button Info Default</a>
<a href="#" class="elcreative_button button_success outlined">Button Info Outlined</a>
<a href="#" class="elcreative_button button_warning unelevated">Button Info Unelevated</a>
<a href="#" class="elcreative_button button_error raised">Button Info Raised</a>

Button with Ripple Effect

Buttons can also have the ripple effect characteristic of Material Design:

Button Default Button Outlined Button Unelevated Button Raised

You can add elcreative_ripple class to the element.

<a href="#" class="elcreative_button elcreative_ripple button_info">Button Default</a>
<a href="#" class="elcreative_button elcreative_ripple button_success rounded outlined">Button Outlined</a>
<a href="#" class="elcreative_button elcreative_ripple button_warning unelevated">Button Unelevated</a>
<a href="#" class="elcreative_button elcreative_ripple button_error rounded raised">Button Raised</a>

Button Sizes

Use these examples if you want to use smaller or larger buttons.

Button Small Button Normal Button Large

• Add button_small class to the element if you want to make Small button size.
• Add button_large class to the element if you want to make Large button size.

<a href="#" class="elcreative_button button_small button_success rounded outlined">Button Small</a>
<a href="#" class="elcreative_button button_warning unelevated">Button Normal</a>
<a href="#" class="elcreative_button button_large button_error rounded raised">Button Large</a>

Button with Icons

Use these examples if you want to use icon on buttons.

Download Download

Surround the text on the button with a span element.

<a class="elcreative_button raised" href="#">
    <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
    </svg>

    <span>Download</span>
</a>
<a class="elcreative_button outlined" href="#">
    <span>Download</span>
    <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
    </svg>
</a>

Tables

The table component represents a set of structured elements made up of rows and columns as table cells that can be used to show data sets to your website users.

Get started with multiple variants and styles of these table components.

ID	Name	Job Title	Degree	Salary
1	Adrian Monino	Front-End Engineer	Computer Science	$120,000
2	Socrates Itumay	Software Engineer	Computer Engineering	$150,000
3	Reynante Labares	Product Manager	Business Management	$250,000
4	Hamza Macasindil	Software Engineer	Computer Engineering	$140,000
5	Roven Galeon	Project Manager	Accountancy	$160,000

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Job Title</th>
            <th>Degree</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>Adrian Monino</td>
            <td>Front-End Engineer</td>
            <td>Computer Science</td>
            <td>$120,000</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Socrates Itumay</td>
            <td>Software Engineer</td>
            <td>Computer Engineering</td>
            <td>$150,000</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Reynante Labares</td>
            <td>Product Manager</td>
            <td>Business Management</td>
            <td>$250,000</td>
        </tr>
        <tr>
            <th>4</th>
            <td>Hamza Macasindil</td>
            <td>Software Engineer</td>
            <td>Computer Engineering</td>
            <td>$140,000</td>
        </tr>
        <tr>
            <th>5</th>
            <td>Roven Galeon</td>
            <td>Project Manager</td>
            <td>Accountancy</td>
            <td>$160,000</td>
        </tr>
    </tbody>
</table>

Table Head Options

Use the table_header class to make colored thead. Color options are: table_primary, table_success, table_warning, table_info and table_error.

ID	Name	Job Title	Degree	Salary
1	Adrian Monino	Front-End Engineer	Computer Science	$120,000
2	Socrates Itumay	Software Engineer	Computer Engineering	$150,000
3	Reynante Labares	Product Manager	Business Management	$250,000
4	Hamza Macasindil	Software Engineer	Computer Engineering	$140,000
5	Roven Galeon	Project Manager	Accountancy	$160,000

<table class="table_header table_primary">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Job Title</th>
            <th>Degree</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>Adrian Monino</td>
            <td>Front-End Engineer</td>
            <td>Computer Science</td>
            <td>$120,000</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Socrates Itumay</td>
            <td>Software Engineer</td>
            <td>Computer Engineering</td>
            <td>$150,000</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Reynante Labares</td>
            <td>Product Manager</td>
            <td>Business Management</td>
            <td>$250,000</td>
        </tr>
        <tr>
            <th>4</th>
            <td>Hamza Macasindil</td>
            <td>Software Engineer</td>
            <td>Computer Engineering</td>
            <td>$140,000</td>
        </tr>
        <tr>
            <th>5</th>
            <td>Roven Galeon</td>
            <td>Project Manager</td>
            <td>Accountancy</td>
            <td>$160,000</td>
        </tr>
    </tbody>
</table>

Table with Striped Rows

Use the table_stripped class to add zebra-striping to any table row within the tbody.

ID	Name	Job Title	Degree	Salary
1	Adrian Monino	Front-End Engineer	Computer Science	$120,000
2	Socrates Itumay	Software Engineer	Computer Engineering	$150,000
3	Reynante Labares	Product Manager	Business Management	$250,000
4	Hamza Macasindil	Software Engineer	Computer Engineering	$140,000
5	Roven Galeon	Project Manager	Accountancy	$160,000

<table class="table_stripped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Job Title</th>
            <th>Degree</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>Adrian Monino</td>
            <td>Front-End Engineer</td>
            <td>Computer Science</td>
            <td>$120,000</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Socrates Itumay</td>
            <td>Software Engineer</td>
            <td>Computer Engineering</td>
            <td>$150,000</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Reynante Labares</td>
            <td>Product Manager</td>
            <td>Business Management</td>
            <td>$250,000</td>
        </tr>
        <tr>
            <th>4</th>
            <td>Hamza Macasindil</td>
            <td>Software Engineer</td>
            <td>Computer Engineering</td>
            <td>$140,000</td>
        </tr>
        <tr>
            <th>5</th>
            <td>Roven Galeon</td>
            <td>Project Manager</td>
            <td>Accountancy</td>
            <td>$160,000</td>
        </tr>
    </tbody>
</table>

Table with Hoverable Rows

Use the table_hovered class to enable a hover state on table rows within a tbody.

ID	Name	Job Title	Degree	Salary
1	Adrian Monino	Front-End Engineer	Computer Science	$120,000
2	Socrates Itumay	Software Engineer	Computer Engineering	$150,000
3	Reynante Labares	Product Manager	Business Management	$250,000
4	Hamza Macasindil	Software Engineer	Computer Engineering	$140,000
5	Roven Galeon	Project Manager	Accountancy	$160,000

<table class="table_hovered">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Job Title</th>
            <th>Degree</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>Adrian Monino</td>
            <td>Front-End Engineer</td>
            <td>Computer Science</td>
            <td>$120,000</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Socrates Itumay</td>
            <td>Software Engineer</td>
            <td>Computer Engineering</td>
            <td>$150,000</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Reynante Labares</td>
            <td>Product Manager</td>
            <td>Business Management</td>
            <td>$250,000</td>
        </tr>
        <tr>
            <th>4</th>
            <td>Hamza Macasindil</td>
            <td>Software Engineer</td>
            <td>Computer Engineering</td>
            <td>$140,000</td>
        </tr>
        <tr>
            <th>5</th>
            <td>Roven Galeon</td>
            <td>Project Manager</td>
            <td>Accountancy</td>
            <td>$160,000</td>
        </tr>
    </tbody>
</table>

Tabs

The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs.

Default Tab

Use the following default tabs component example that the user can navigate from on your website.

<div class="elcreative_tabs">
    <div class="tab_buttons">
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_1" data-toggle-radio-group="tab_group_1" data-toggle-is-active="">
            <span>Tab 1</span>
        </button>
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_2" data-toggle-radio-group="tab_group_1">
            <span>Tab 2</span>
        </button>
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_3" data-toggle-radio-group="tab_group_1">
            <span>Tab 3</span>
        </button>
    </div>
    <div class="tab_contents">
        <div class="tab_content" id="tab_1">
            <strong>Tab Content 1</strong>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse dicta architecto quibusdam fuga aliquam nesciunt tenetur ea fugit repellendus voluptates!</p>
        </div>
        <div class="tab_content" id="tab_2">
            <strong>Tab Content 2</strong>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo ex doloribus sapiente porro saepe in magnam. Ratione veniam pariatur sit corporis quas saepe! Ex harum reprehenderit, nobis ipsam impedit accusamus molestias molestiae debitis assumenda, ipsa quam adipisci. Ducimus, molestiae odit?</p>
        </div>
        <div class="tab_content" id="tab_3">
            <strong>Tab Content 3</strong>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio atque fuga porro officiis maxime ratione eum, reiciendis commodi assumenda reprehenderit minus necessitatibus earum, natus voluptates repudiandae error nostrum suscipit doloremque modi voluptas officia ab! Modi consequuntur maiores dolor nobis molestias pariatur eum. At optio ut quibusdam minima perspiciatis vero iusto voluptatem? Vitae nobis, eos porro ab recusandae illo quibusdam corporis?</p>
        </div>
    </div>
</div>

Tabs Bordered

Use the tabs_bordered class to make tabs bordered.

<div class="elcreative_tabs tabs_bordered">
    <div class="tab_buttons">
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_1" data-toggle-radio-group="tab_group_1" data-toggle-is-active="">
            <span>Tab 1</span>
        </button>
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_2" data-toggle-radio-group="tab_group_1">
            <span>Tab 2</span>
        </button>
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_3" data-toggle-radio-group="tab_group_1">
            <span>Tab 3</span>
        </button>
    </div>
    <div class="tab_contents">
        <div class="tab_content" id="tab_1">
            <strong>Tab Content 1</strong>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse dicta architecto quibusdam fuga aliquam nesciunt tenetur ea fugit repellendus voluptates!</p>
        </div>
        <div class="tab_content" id="tab_2">
            <strong>Tab Content 2</strong>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo ex doloribus sapiente porro saepe in magnam. Ratione veniam pariatur sit corporis quas saepe! Ex harum reprehenderit, nobis ipsam impedit accusamus molestias molestiae debitis assumenda, ipsa quam adipisci. Ducimus, molestiae odit?</p>
        </div>
        <div class="tab_content" id="tab_3">
            <strong>Tab Content 3</strong>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio atque fuga porro officiis maxime ratione eum, reiciendis commodi assumenda reprehenderit minus necessitatibus earum, natus voluptates repudiandae error nostrum suscipit doloremque modi voluptas officia ab! Modi consequuntur maiores dolor nobis molestias pariatur eum. At optio ut quibusdam minima perspiciatis vero iusto voluptatem? Vitae nobis, eos porro ab recusandae illo quibusdam corporis?</p>
        </div>
    </div>
</div>

Tabs Flush

Use the tabs_flush class to make flushed tabs.

<div class="elcreative_tabs">
    <div class="tab_buttons tabs_flush">
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_1" data-toggle-radio-group="tab_group_1" data-toggle-is-active="">
            <span>Tab 1</span>
        </button>
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_2" data-toggle-radio-group="tab_group_1">
            <span>Tab 2</span>
        </button>
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_3" data-toggle-radio-group="tab_group_1">
            <span>Tab 3</span>
        </button>
    </div>
    <div class="tab_contents">
        <div class="tab_content" id="tab_1">
            <strong>Tab Content 1</strong>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse dicta architecto quibusdam fuga aliquam nesciunt tenetur ea fugit repellendus voluptates!</p>
        </div>
        <div class="tab_content" id="tab_2">
            <strong>Tab Content 2</strong>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo ex doloribus sapiente porro saepe in magnam. Ratione veniam pariatur sit corporis quas saepe! Ex harum reprehenderit, nobis ipsam impedit accusamus molestias molestiae debitis assumenda, ipsa quam adipisci. Ducimus, molestiae odit?</p>
        </div>
        <div class="tab_content" id="tab_3">
            <strong>Tab Content 3</strong>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio atque fuga porro officiis maxime ratione eum, reiciendis commodi assumenda reprehenderit minus necessitatibus earum, natus voluptates repudiandae error nostrum suscipit doloremque modi voluptas officia ab! Modi consequuntur maiores dolor nobis molestias pariatur eum. At optio ut quibusdam minima perspiciatis vero iusto voluptatem? Vitae nobis, eos porro ab recusandae illo quibusdam corporis?</p>
        </div>
    </div>
</div>

Tabs Button with Icon

This is an example of the tabs component where you can also use a SVG powered icon to complement the text within the navigational tabs.

<div class="elcreative_tabs">
    <div class="tab_buttons">
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_1" data-toggle-radio-group="tab_group_1" data-toggle-is-active="">
            <svg width="24" height="24" viewBox="0 0 24 24"><path d="M21,3H3A2,2 0 0,0 1,5V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V5A2,2 0 0,0 21,3M21,19H3V5H13V9H21V19Z" /></svg>
            <span>Tab 1</span>
        </button>
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_2" data-toggle-radio-group="tab_group_1">
            <svg width="24" height="24" viewBox="0 0 24 24"><path d="M21,3H3A2,2 0 0,0 1,5V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V5A2,2 0 0,0 21,3M21,19H3V5H13V9H21V19Z" /></svg>
            <span>Tab 2</span>
        </button>
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_3" data-toggle-radio-group="tab_group_1">
            <span>Tab 3</span>
            <svg width="24" height="24" viewBox="0 0 24 24"><path d="M21,3H3A2,2 0 0,0 1,5V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V5A2,2 0 0,0 21,3M21,19H3V5H13V9H21V19Z" /></svg>
        </button>
    </div>
    <div class="tab_contents">
        <div class="tab_content" id="tab_1">
            <strong>Tab Content 1</strong>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse dicta architecto quibusdam fuga aliquam nesciunt tenetur ea fugit repellendus voluptates!</p>
        </div>
        <div class="tab_content" id="tab_2">
            <strong>Tab Content 2</strong>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo ex doloribus sapiente porro saepe in magnam. Ratione veniam pariatur sit corporis quas saepe! Ex harum reprehenderit, nobis ipsam impedit accusamus molestias molestiae debitis assumenda, ipsa quam adipisci. Ducimus, molestiae odit?</p>
        </div>
        <div class="tab_content" id="tab_3">
            <strong>Tab Content 3</strong>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio atque fuga porro officiis maxime ratione eum, reiciendis commodi assumenda reprehenderit minus necessitatibus earum, natus voluptates repudiandae error nostrum suscipit doloremque modi voluptas officia ab! Modi consequuntur maiores dolor nobis molestias pariatur eum. At optio ut quibusdam minima perspiciatis vero iusto voluptatem? Vitae nobis, eos porro ab recusandae illo quibusdam corporis?</p>
        </div>
    </div>
</div>

Tabs with Arrow Keys Support

Tabs that supports the Arrow keys on the Keyboard (Press the Arrow keys Left/right on the Keyboard, the Tabs will switch):

You just need to add the data-toggle-arrows attribute to the button which has class tab_button.

<div class="elcreative_tabs">
    <div class="tab_buttons">
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_1" data-toggle-radio-group="tab_group_3" data-toggle-arrows="" data-toggle-is-active="">
            <span>Tab 1</span>
        </button>
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_2" data-toggle-radio-group="tab_group_3" data-toggle-arrows="">
            <span>Tab 2</span>
        </button>
        <button class="tab_button elcreative_ripple" type="button" data-toggle-class="" data-toggle-target="#tab_2" data-toggle-radio-group="tab_group_3" data-toggle-arrows="">
            <span>Tab 3</span>
        </button>
    </div>
    <div class="tab_contents">
        <div class="tab_content" id="tab_1">
            <strong>Tab Content 1</strong>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse dicta architecto quibusdam fuga aliquam nesciunt tenetur ea fugit repellendus voluptates!</p>
        </div>
        <div class="tab_content" id="tab_2">
            <strong>Tab Content 2</strong>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo ex doloribus sapiente porro saepe in magnam. Ratione veniam pariatur sit corporis quas saepe! Ex harum reprehenderit, nobis ipsam impedit accusamus molestias molestiae debitis assumenda, ipsa quam adipisci. Ducimus, molestiae odit?</p>
        </div>
        <div class="tab_content" id="tab_3">
            <strong>Tab Content 3</strong>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio atque fuga porro officiis maxime ratione eum, reiciendis commodi assumenda reprehenderit minus necessitatibus earum, natus voluptates repudiandae error nostrum suscipit doloremque modi voluptas officia ab! Modi consequuntur maiores dolor nobis molestias pariatur eum. At optio ut quibusdam minima perspiciatis vero iusto voluptatem? Vitae nobis, eos porro ab recusandae illo quibusdam corporis?</p>
        </div>
    </div>
</div>

Snackbar/Toast

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

Click Me to Open Snackbar!

You just need to set the text for the button and some attribute values in snackbar("SNACKBAR_TEXT", SNACKBAR_DURATION).

<button class='elcreative_button raised elcreative_ripple' onclick='snackbar("This Snackbar will removed after 2 Second (2000ms).", 2000)' type='button' aria-label='Open Snackbar'>
    <span>Click Me to Open Snackbar!</span>
</button>

Input

Get started with these custom input form components.

Default Input

This is an example of a input form component.

<div class="elcreative_input">
    <input type="password" id="password" placeholder=" " />
    <label for="password">Password Input</label>
</div>
<div class="elcreative_input">
    <input type="number" id="number" placeholder=" " />
    <label for="number">Number Input</label>
</div>
<div class="elcreative_input">
    <input type="file" id="file" placeholder=" " />
    <label for="file">File Input</label>
</div>
<div class="elcreative_input">
    <input type="date" id="date" placeholder=" " />
    <label for="date">Date Input</label>
</div>
<div class="elcreative_input">
    <input type="time" id="time" placeholder=" " />
    <label for="time">Time Input</label>
</div>
<div class="elcreative_input">
    <input type="datetime-local" id="datetime-local" placeholder=" " />
    <label for="datetime-local">Datetime Local Input</label>
</div>
<div class="elcreative_input">
    <input type="color" id="color" placeholder=" " />
    <label for="color">Color Input</label>
</div>

Downloadable File

Here is an example of a Download Files component:

<div class="elcreative_downloadable">
    <div class="downloadable_icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M20 6H12L10 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6M18 12H16V14H18V16H16V18H14V16H16V14H14V12H16V10H14V8H16V10H18V12Z" /></svg>
    </div>
    <div class="downloadable_content">
        <strong class="downloadable_filename">Materia X2 Premium.zip</strong>
        <em class="downloadable_filesize">2000 GB</em>
    </div>
    <a class="downloadable_url" href="https://materiax.elcreativeacademy.com/" title="Materia_X2_Premium.zip" rel="nofollow noopener noreferer" target="_blank">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z" /></svg>
    </a>
</div>

Masonry Image

Here is an example of a Masonry Image component:

Image from Unsplash.

<div class="elcreative_image image_masonry">
    <div class="image_container">
        <img class="lazyload image_item" loading="lazy" data-src="https://images.unsplash.com/photo-1653287805993-9a1a7ea28c20?w=800" />
        <img class="lazyload image_item" loading="lazy" data-src="https://images.unsplash.com/photo-1557123481-ef06b737a474?w=800" />
        <img class="lazyload image_item" loading="lazy" data-src="https://images.unsplash.com/photo-1653297526910-4834e6763f58?w=800" />
        <img class="lazyload image_item" loading="lazy" data-src="https://images.unsplash.com/photo-1587280717868-fff936890905?w=800" />
        <img class="lazyload image_item" loading="lazy" data-src="https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=800" />
        <img class="lazyload image_item" loading="lazy" data-src="https://images.unsplash.com/photo-1557033051-1d426c3a4d42?w=800" />
        <img class="lazyload image_item" loading="lazy" data-src="https://images.unsplash.com/photo-1558769673-de478227d1f5?w=800" />
        <img class="lazyload image_item" loading="lazy" data-src="https://images.unsplash.com/photo-1503631285924-e1544dce8b28?w=800" />
    </div>
</div>

Pre-Built Components

Pre-Build Components in the Materia X2 theme are HTML components or elements that have been styled using reusable utility class names.

[unavailable yet]

Those are some steps to add components or elements manually in Materia X2 Theme. If you have any questions, please write them in the comments section.

If you want to report some bugs, you can write them in the comments section on the Bug Report page and if you want to request new features or want to provide feedback, please write them in the comments section on the Request and Feedback page.