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.

Alerts

Provide contextual feedback messages for typical user actions.

Alert Variants

Alert has two different variants:

<div class='elcreative_alert'>
    A simple default alert—check it out!
</div>

<div class='elcreative_alert alert_outline'>
    A simple outlined alert—check it out!
</div>

Alert with Solid Background

A solid background style variant without border. Use one of the four style:

<div class='elcreative_alert alert_info'>
    A simple info alert—check it out!
</div>

<div class='elcreative_alert alert_warning'>
    A simple warning alert—check it out!
</div>

<div class='elcreative_alert alert_success'>
    A simple success alert—check it out!
</div>

<div class='elcreative_alert alert_error'>
    A simple error alert—check it out!
</div>

Alert with Outline Style

An outline style variant with a border. Use one of the four style:

<div class='elcreative_alert alert_info alert_outline'>
    A outline info alert—check it out!
</div>

<div class='elcreative_alert alert_warning alert_outline'>
    A outline warning alert—check it out!
</div>

<div class='elcreative_alert alert_success alert_outline'>
    A outline success alert—check it out!
</div>

<div class='elcreative_alert alert_error alert_outline'>
    A outline error alert—check it out!
</div>

Alert with Additional Content

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

<div class='elcreative_alert alert_info'>
    <strong>Well done!</strong>
    <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

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.

Button Variants

Button has four different variants.

Default ButtonOutlined ButtonUnelevated ButtonRaised Button

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

Button Shapes

Button can have additional shapes:

Default ButtonRounded Button

<a class="elcreative_button raised" href="#">Default Button</a>
<a class="elcreative_button raised rounded" href="#">Rounded Button</a>

Button with Ripple Effect

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

Button With Ripple Effect

<a class="elcreative_button raised elcreative_ripple" href="#">Button With Ripple Effect</a>

Button with Icons

Make button with icon by adding only SVG Icon and must pass describeable text

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

    <span>Download</span>
</a>

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

Table

Using the most basic table markup, here's how Table look. All table styles are inherited, meaning any nested tables will be styled in the same manner as the parent.

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

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

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

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

Accordion/Collapsible Panel

Collapsibles or Accordion are useful when you want to hide and show large amount of content:

Simple Accordion/Collapsible Panel

Simple Collapsible or Accordion Panels:

<div class='elcreative_collapse'>
    <div class='collapse_panel'>
        <button class="collapse_button" type="button" data-toggle-class="active" data-toggle-target-next><strong>Collapse 1 - Click Me!</strong></button>
        <div class="collapse_content">
            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.
        </div>
    </div>
    <div class='collapse_panel'>
        <button class="collapse_button" type="button" data-toggle-class="active" data-toggle-target-next><strong>Collapse 2 - Click Me!</strong></button>
        <div class="collapse_content">
            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.
        </div>
    </div>
</div>

Accordion/Collapsible Panel with Escape (ESC) Key Support

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

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

<div class='elcreative_collapse'>
    <div class='collapse_panel'>
        <button data-toggle-escape class="collapse_button" type="button" data-toggle-class="active" data-toggle-target-next><strong>Collapse 1 - Click Me!</strong></button>
        <div class="collapse_content">
            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.
        </div>
    </div>
    <div class='collapse_panel'>
        <button data-toggle-escape class="collapse_button" type="button" data-toggle-class="active" data-toggle-target-next><strong>Collapse 2 - Click Me!</strong></button>
        <div class="collapse_content">
            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.
        </div>
    </div>
</div>

Accordion/Collapsible Panel with Full-Featured

Example of a fully featured Accordion with Accessibility support:

<div class='elcreative_collapse'>
    <div class='collapse_panel'>
        <button id='button_panel_1' data-toggle-target-parent='#panel_1' data-toggle-group='accordion' class="collapse_button" type="button" data-toggle-class="active" aria-controls='panel_1' aria-expanded='false' data-toggle-escape data-toggle-arrows><strong>Collapse 1 - Click Me!</strong></button>
        <div id='panel_1' class="collapse_content" role='region' aria-labelledby='button_panel_1' aria-hidden='true'>
            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.
        </div>
    </div>
    <div class='collapse_panel'>
        <button id='button_panel_2' data-toggle-target-parent='#panel_2' data-toggle-group='accordion' class="collapse_button" type="button" data-toggle-class="active" aria-controls='panel_2' aria-expanded='false' data-toggle-escape data-toggle-arrows><strong>Collapse 2 - Click Me!</strong></button>
        <div id='panel_2' class="collapse_content" role='region' aria-labelledby='button_panel_2' aria-hidden='true'>
            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.
        </div>
    </div>
</div>

Tabs

Same as Collapsible Panel, Tabs are also useful when you want to hide and show large amount of content:

Simple Tabs

Here is an example of Simple 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="">
      <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>

Tab Button with Icon

<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_2" 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_2">
      <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_2">
      <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_3_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_3_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_3_3" 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_3_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_3_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_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

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.

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

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

There is a Shortcode for the Snackbar component that you can use with Materia X2 theme. 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.

Downloadable File

Here is an example of a Download Files component that uses the CSS Utility Class:

<div class="my-3 flex w-full flex-row items-center justify-between overflow-hidden rounded-lg bg-colorBackground p-3 shadow-2dp dark:bg-colorColorModeDarkBackgroundAlt">
    <div class="box-content h-6 w-6 rounded-full bg-colorKey p-3 text-colorBackground shadow-2dp dark:bg-colorColorModeDarkKey dark:text-colorColorModeDarkBackground">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z" /></svg>
    </div>
    <div class="flex w-full flex-col items-start justify-center px-3 leading-6"><strong class="line-clamp-1" title="Materia_X2_Premium.zip">Materia_X2_Premium.zip</strong><em class="text-sm text-colorMeta dark:text-colorColorModeDarkMeta">2000 GB</em></div>
    <a href="https://materiax.elcreativeacademy.com/" title="Materia_X2_Premium.zip" class="elcreative_button_icon elcreative_ripple text-colorMeta dark:text-colorColorModeDarkMeta" rel="nofollow noopener noreferer" target="_blank">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /></svg>
    </a>
</div>

There is a Shortcode for the Downloadable File components that you can use with Materia X2 theme. Please check the documentation for Materia X2 - Post Shortcode.

Masonry Image

Here is an example of a Masonry Image component that uses the CSS Utility Class:

Image from Unsplash.

<div class="my-12px mx-auto columns-2 xl:columns-3">
    <div class="w-full aspect-video">
        <img class="animate-pulse lazyload mx-0 mt-0 mb-12px" data-src="https://images.unsplash.com/photo-1653287805993-9a1a7ea28c20?w=800" style="margin:0 0 16px 0" />
        <img class="animate-pulse lazyload mx-0 mt-0 mb-12px" data-src="https://images.unsplash.com/photo-1557123481-ef06b737a474?w=800" style="margin:0 0 16px 0" />
        <img class="animate-pulse lazyload mx-0 mt-0 mb-12px" data-src="https://images.unsplash.com/photo-1653297526910-4834e6763f58?w=800" style="margin:0 0 16px 0" />
        <img class="animate-pulse lazyload mx-0 mt-0 mb-12px" data-src="https://images.unsplash.com/photo-1587280717868-fff936890905?w=800" style="margin:0 0 16px 0" />
        <img class="animate-pulse lazyload mx-0 mt-0 mb-12px" data-src="https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=800" style="margin:0 0 16px 0" />
        <img class="animate-pulse lazyload mx-0 mt-0 mb-12px" data-src="https://images.unsplash.com/photo-1557033051-1d426c3a4d42?w=800" style="margin:0 0 16px 0" />
        <img class="animate-pulse lazyload mx-0 mt-0 mb-12px" data-src="https://images.unsplash.com/photo-1558769673-de478227d1f5?w=800" style="margin:0 0 16px 0" />
        <img class="animate-pulse lazyload mx-0 mt-0 mb-12px" data-src="https://images.unsplash.com/photo-1503631285924-e1544dce8b28?w=800" style="margin:0 0 16px 0" />
    </div>
</div>

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

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.