Materia X2 - Components (Manual Mode)

Available Component in Materia X2 Theme.

Yasya El Hakim

December 22, 2021

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:

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.

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>

Make sure the id of each one is unique (different from each other).

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.

Alert! Change a few things up and try submitting again.

Info alert! Change a few things up and try submitting again.

Success alert! Change a few things up and try submitting again.

Warning alert! Change a few things up and try submitting again.

Error alert! Change a few things up and try submitting again.

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

Alert! Change a few things up and try submitting again.

Info alert! Change a few things up and try submitting again.

Success alert! Change a few things up and try submitting again.

Warning alert! Change a few things up and try submitting again.

Error alert! Change a few things up and try submitting again.

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

Ensure that these requirements are met:

At least 10 characters (and up to 100 characters)
At least one lowercase character
Inclusion of at least one special character, e.g., ! @ # ?

Ensure that these requirements are met:

At least 10 characters (and up to 100 characters)
At least one lowercase character
Inclusion of at least one special character, e.g., ! @ # ?

Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

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

There is a Shortcode for the Alert component that you can use with Materia X2. Please check the documentation for Materia X2 - Post Shortcode.

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>

There is a Shortcode for the Button component that you can use with Materia X2. Please check the documentation for Materia X2 - Post Shortcode.

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.

This component is available on Materia X2 version 3.0 and above.

Default Tab

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

Tab Content 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse dicta architecto quibusdam fuga aliquam nesciunt tenetur ea fugit repellendus voluptates!

Tab Content 2

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?

Tab Content 3

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?

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

Tab Content 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse dicta architecto quibusdam fuga aliquam nesciunt tenetur ea fugit repellendus voluptates!

Tab Content 2

Tab Content 3

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

Tab Content 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse dicta architecto quibusdam fuga aliquam nesciunt tenetur ea fugit repellendus voluptates!

Tab Content 2

Tab Content 3

<div class="elcreative_tabs tabs_flush">
    <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 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.

Tab Content 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse dicta architecto quibusdam fuga aliquam nesciunt tenetur ea fugit repellendus voluptates!

Tab Content 2

Tab Content 3

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

Tab Content 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse dicta architecto quibusdam fuga aliquam nesciunt tenetur ea fugit repellendus voluptates!

Tab Content 2

Tab Content 3

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.

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>

There is a Shortcode for the Snackbar component that you can use with Materia X2. Please check the documentation for Materia X2 - Post Shortcode.

Input

Get started with these custom input form components.

Default Input

This is an example of a input form component.

Email Input

Password Input

Number Input

File Input

Date Input

Time Input

Datetime Local Input

Color Input

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

Materia X2 Premium.zip 2000 GB

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

Masonry Image element or component is only available in Materia X2 version 2.9 and above.

There is a Shortcode for the Masonry Image component that you can use with Materia X2. Please check the documentation for Materia X2 - Post Shortcode.

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.

Labels:

Documentation

Yasya El Hakim

404 Not Found!

Comments

To add an image:
[image] image_url [/image]

To add a code block:
[code] your_code [/code]

To add a quote:
[quote] your_quote [/quote]

To add a link:
[link] your_link_text | link_url [/link]

GomGop

January 26, 2023 at 9:11 PM

Comment Poster

test

Reply to This Comment

Guru Digital

May 18, 2023 at 7:44 AM

Comment Poster

Mas tolong tambahkan komponen guide list.

Show all Show less

Yasya El Hakim

May 25, 2023 at 8:49 PM

Replied

contohnya seperti apa?

Guru Digital

June 2, 2023 at 2:40 PM

Replied

[image]https://lh3.googleusercontent.com/4_N6HiepKJDlKdT6MHScRq6xUjRscRQ1TNgm-V7AS8q6PLfM7yC630JIS413CIH1QuB6YsoLRB9KP_b3=w480-h520-rw[/image]

Reply to This Comment

Reza Noprial Lubis

May 25, 2023 at 10:52 AM

Comment Poster

Ada panduan untuk menggunakan "Input" mas? Khususnya untuk File input.

Show all Show less

Yasya El Hakim

May 25, 2023 at 8:49 PM

Replied

di copy saja code nya mas

Tehnosia Web

September 15, 2023 at 10:26 PM

Replied

Apakah Untuk Searching Form ajax nya ada kode juga mas seperti kode input
Reques untuk versi kedepan smoga ada jg kode ini untuk serch formnya

Yasya El Hakim

September 16, 2023 at 2:10 AM

Replied

Tidak mas, itu bisa dibuat sendiri (Custom)

Reply to This Comment

Portal Medis

August 24, 2023 at 11:33 PM

Comment Poster

Untuk Variasi tabel apakah ada panduannya mas, seperti satu sub header table berada di tengah (marge jadi 1 kolom) namun baris di bawahnya terdiri dari beberapa kolom

Show all Show less

Yasya El Hakim

August 24, 2023 at 11:53 PM

Replied

Bisa pakai WYSIWYG (Post Editor) yang mendukung Table Editor mas.

Reply to This Comment

Priyansh Maurya

September 16, 2023 at 1:25 PM

Comment Poster

latest Tech Information

Reply to This Comment

oyeprice_staff

September 23, 2023 at 1:22 PM

Comment Poster

Sir, can we use the file input component in this contact form, I have included but the files are not being received in the email. Please guide me

Show all Show less

Yasya El Hakim

September 29, 2023 at 9:35 PM

Replied

Yes, but it need customization

Reza Noprial Lubis

May 24, 2024 at 11:42 AM

Replied

Tertarik dengan ini, mas. Berharap ada panduannya.

Reply to This Comment

October 11, 2023 at 12:11 AM

Comment Poster

Where is post view counter

Show all Show less

Yasya El Hakim

October 12, 2023 at 10:46 AM

Replied

currently not available

Reply to This Comment

ReanS

August 18, 2024 at 7:10 PM

Comment Poster

Halo mas, mau tanya nih. Ini memang saya gak bisa nyari atau gak ketemu atau memang gak ada. Kalau buat script box gimana ya? Sebenernya bisa nyari yang lain, tapi pengen style yang sama, sama yang disini. Disini bagus dan simpel

Show all Show less

Yasya El Hakim

August 19, 2024 at 3:23 PM

Replied

di Materia X2 atau tema lain?

ReanS

August 19, 2024 at 7:28 PM

Replied

materia x2 mas

Yasya El Hakim

August 21, 2024 at 3:01 PM

Replied

Kalau di Materia sudah otomatis, tinggal pakai tag pre - code saja. Contoh:

<pre><code>MASUKKAN TEKS KODE DISINI
</code></pre>

ReanS

August 21, 2024 at 7:16 PM

Replied

ketika dicoba kodenya gak nampil semua, yg awalannya "script" gak muncul script dan /script nya, isinya ada tapi. Juga yang lain malah jadi kode aktif dan nampilin hasil kodenya, kenapa ya?

ReanS

August 21, 2024 at 7:40 PM

Replied

oh, aman mas, sudah bisa

Yasya El Hakim

August 22, 2024 at 11:19 PM

Replied

Di escape dulu code html nya.

Mantull

ReanS

August 23, 2024 at 8:14 PM

Replied

oh iya mas, untuk tabel, bisa gak kala misalnya teks nya kepanjangan tuh turun kebawah dari pada jadi bablas kepinggir? juga untuk notifikasi bisa kostum warna dan ikon, ah seenggaknya kostum warna aja

makasih sebelumnya

Reply to This Comment

Admin Blog

October 9, 2024 at 11:22 AM

Comment Poster

Please add blockquotes component

Show all Show less

Yasya El Hakim

October 10, 2024 at 5:49 AM

Replied

The component or style already exists, you can use the blockquote tag.

Reply to This Comment