I copied these snippets from the Mai Theme Lifestyle and Mai Theme Law demo page code

MAI - All Useful Shortcodes CSS and HTML snippets I could find in Mai demo pages

[grid content="post" exclude_categories="18" number="9" show="image, title, content, more_link" content_limit="30" slider="true" slidestoscroll="3" dots="true" center_mode="true"]

/**--------------------------------------------------------- */

Photo takes full half of screen

[columns align="center, middle" gutter="0"]
[col image="618" image_size="featured"]
[/col]
[col class="column"]
<div style="max-width: 300px; margin: auto; text-align: center;">
<h4>Never miss a post</h4>
<em>Sign up to add style to your inbox.</em>
[ninja_form id=2]

</div>
[/col]
[/columns]

/**--------------------------------------------------------- */


Simplified verson of above

[columns align="center, middle" gutter="0"]
[col image="618" image_size="featured"]
[/col]
[col]
<h4>Never miss a post</h4>
<em>Sign up to add style to your inbox.</em>

<a class="button" href="#">Go Now</a>
[/col]
[/columns]

/**--------------------------------------------------------- */

Post slider centered text

[grid content="post" show="image, title, content, more_link" content_limit="14" categories="18" number="9" align="center" slider="true" slidestoscroll="3" center_mode="true"]

/**--------------------------------------------------------- */

Button and button alt

<a class="button" href="#">Download Now</a> <a class="button alt" href="#">Learn More</a>

/**--------------------------------------------------------- */

Post grid, featured image bg text center middle

[grid content="category" parent="18" columns="3" show="image, title" image_location="bg" align="center, middle"]

/**--------------------------------------------------------- */

Make an image span full browser window

Change SECTION SETTINGS TO

Content Width: Full Width 
Additional Classes: full-width-image 

/**--------------------------------------------------------- */

Testimonial slider, should work with ordinary posts, set link to off?

[grid content="testimonial" number="all" order_by="rand" columns="1" align="middle" slider="true" dots="true"] 
Could I do this using pages, link=(no) & ids?



/**--------------------------------------------------------- */

Ninja Forms Full width button and inline form. Might need paid upgade?

https://intercom.help/bizbudding/mai-theme/mai-lifestyle/mai-lifestyle-theme-demo-home-two
<style>

.field-wrap.submit-wrap .ninja-forms-field[type="button"] {
	display:block;
	width: 100%;
}
</style>

/**--------------------------------------------------------- */

Blog grid centered

[grid content="post" number="6" show="image, title, content, more_link" content_limit="16"]

/**--------------------------------------------------------- */

Full width image slider with post title

[grid content="post" categories="18" columns="1" show="image, title" image_size="banner" image_location="bg" inner="light" align="center, middle" slider="true" fade="true" autoplay="true" overlay="gradient"]

/**--------------------------------------------------------- */

Six column grid, small images, post title below thumbnail

[grid content="post" number="6" columns="6" offset="6" show="image, title" image_size="one-fourth" gutter="10"]

/**--------------------------------------------------------- */

Two columns, two independant grids, one column wide grid left, two column grid right

[columns]
[col]
[grid content="post" offset="12" number="1" columns="1" image_size="one-half" show="image, title, content, more_link" content_limit="32"]
[/col]
[col]
[grid content="post" offset="13" number="4" columns="2" show="image, title" entry_class="text-sm"]
[/col]
[/columns]

/**--------------------------------------------------------- */

Featured image grid with no gutter, images butt up to each other

[grid content="category" columns="3" number="6" parent="18" show="image, title" image_location="bg" align="center, middle" gutter="0" bottom="0"]

/**--------------------------------------------------------- */

WordPress gallery shortcode with Mai columns

[gallery columns="6" link="none" ids="1853,1856,1852,1854,1857,1855"]

/**--------------------------------------------------------- */

HOME PAGE TWO ENDS

/**--------------------------------------------------------- */

HOME PAGE THREE DEMO CONTENT - ALL IN ONE: needs Ninja Forms

Uses content sidbar layout

https://intercom.help/bizbudding/mai-theme/mai-lifestyle/mai-lifestyle-theme-demo-home-three

[grid content="post" number="1" columns="1" show="image, title, excerpt, more_link"]

[grid content="post" grid_title="Dual Columns" number="2" columns="2" offset="1" show="image, title, excerpt, more_link" content_limit="16"]

[callout style="overflow:hidden;"]
<h2>Join our newsletter</h2>
Sign up now to get all of our latest posts and recipes right to your inbox!
[ninja_form id=3]
[/callout]

[grid content="post" grid_title="Triple Columns" number="3" columns="3" offset="3" show="image, title" entry_class="text-xs-center text-xs"]

[grid content="post" grid_title="Quadruple Columns" number="4" columns="4" offset="6" show="image, title" image_size="one-fourth" entry_class="text-xs-center text-xs" gutter="10"]

[grid content="post" grid_title="Sextuple Columns" number="6" columns="6" offset="10" show="image" image_size="one-fourth" image_location="bg" overlay="none" gutter="10"]

HOME PAGE THREE ENDS

/**--------------------------------------------------------- */

Extra snippets

You may be interested in these posts from the same category.

[grid content="post" taxonomy="category" terms="current" exclude_current="true" number="12" gutter="10" align_text="center" slider="true" center_mode="true"]


Quote? And button small?

<span class="text-lg"><em>"Every day is another chance to get stronger, to eat better, to live healthier, and to be the best version of you."</em></span>

<a class="button more-link small" href="https://maitheme.com/mai-lifestyle-pro/blog/">Be A Better You</a>


Recent posts row of featured images

[grid content="post" exclude_current="true" show="image" image_size="thumbnail" image_location="bg" columns="6" number="6" gutter="20" overlay="none"]

/**--------------------------------------------------------- */

Mai Law Theme Demo "Homepage"
https://intercom.help/bizbudding/mai-theme/mai-law/mai-law-theme-demo-homepage



Button and small text link

<a class="button white" href="https://demo.maitheme.com/law/">FREE CONSULTATION</a>  <a class="scroll-to text-sm" href="#why-us">WHY CHOOSE US?</a>



Grid 3x3 post title over featured image and constrained intro text. Put headline in Title: box

<p class="text-lg" style="max-width: 800px; margin: auto;">Our full service firm has over 50 years of experience in a variety of practice areas and legal services. We pay special attention to your needs, pride ourselves on delivering consistent, outstanding results, and adhere to strict ethical and legal guidelines. Browse our practice areas to learn more about how we can help you.</p>

[grid content="page" parent="13" number="all" xs="12" sm="6" md="4" show="image, title" image_location="bg" overlay="gradient" align_text="center, bottom" class="top-xs-xxl"]

This grid uses child pages...
Our demo site has a page called Practice Areas which has the ID of 13 . All of the actual practice areas are child pages of this page, so in our [grid]  shortcode we use parent="13"  to only show child pages of the main Practice Area page in this section.




Section title, intro paragraph, THEN two columns, video on right. Uses #why-us jump link

<p class="text-lg" style="max-width: 800px; margin: auto;">Mai Law Pro Theme will get your law firm website ready in no time. Header layouts, banner area, grid archive settings, and many more theme customization features make it simple for you to create an easy to navigate website that caters to your clients' needs.</p>
[columns align="middle" top="xxl"]
[col align_text="left"]
<div class="bottom-xs-xxl">
<h3>Responsive Design</h3>
Built with HTML5 and CSS3, Mai Law Pro is fully responsive to give your mobile visitors a great experience.

</div>
<div class="bottom-xs-xxl">
<h3>Rocket Fast</h3>
A balance of site architecture, UX, clean design, and quality code leads to beautiful websites that load fast and are easy to use.

</div>
<div class="bottom-xs-xxl">
<h3>Great Support</h3>
We invest a lot in our support. We keep our extensive arsenal of how-to's and help docs regularly updated, and if you have a set-up question, we are here to chat so you're never left stuck.

</div>
[/col]
[col]
https://youtu.be/UsgYKyvzlYY
[/col]
[/columns]




Section title: Our Attorneys. Five circle faces

<p class="text-lg" style="max-width: 800px; margin: auto;">Our reputable, talented team members are among the top in their respective fields. We care about our clients and our community and will work tirelessly to achieve exceptional results for you.</p>
[grid content="page" parent="11" number="all" align="center" show="image, title, excerpt, more_link" more_link_text="Read More" image_size="thumbnail" image_align="center" boxed="false" entry_class="bottom-xs-xxl"]




Section Title: News & Events. 3 col slider over big bg photo

<p class="text-lg" style="max-width: 800px; margin: auto;">Stay up to date on our latest articles, press releases, and what we are doing serve and bring change to our community.</p>
[grid content="post" number="6" show="image, title, excerpt, more_link" content_limit="36" boxed="true" image_location="before_title" slider="true"]

<a class="text-lg" href="https://demo.maitheme.com/law/news/">View All Posts</a>




Section Title: Success Stories. 3 testimonial row

[columns]
[col]
<em>"I love this theme! Great flexibility and so many options! But best of all is the responsive customer support."</em>
<strong>- Linda</strong>
[/col]
[col]
<em>"I've been very happy with my experience with the Mai Theme and the company's support and have been recommending it to others. Thank you!"</em>
<strong>- Olivia</strong>
[/col]
[col]
<em>"Your theme, instructional videos and tutorials and help are top notch!!!!"</em>
<strong>- Lisa</strong>
[/col]
[/columns]




Blue #067ccc full width row with rext and button

<strong>Looking for immediate answers to your questions?</strong>
<h2>Schedule a no-cost consultation today!</h2>
This page was built using the powerful Sections page template that comes with this theme. With the “Sections” template, you’re not stuck with using custom widget areas when designing your home page. And why limit yourself to a front page? The “Sections” template can be used on as many pages as you like!

<a class="button large white" href="https://demo.maitheme.com/law/">SCHEDULE NOW</a>



/**--------------------------------------------------------- */

Mai Law Theme Demo "Homepage" END
https://intercom.help/bizbudding/mai-theme/mai-law/mai-law-theme-demo-homepage

/**--------------------------------------------------------- */






Mai Law Theme Demo "Home Two"

https://intercom.help/bizbudding/mai-theme/mai-law/mai-law-theme-demo-home-two


Section Title: Practice Areas

<p class="text-lg">Our full service firm has over 50 years of experience in a variety of practice areas and legal services. We pay special attention to your needs, pride ourselves on delivering consistent, outstanding results, and adhere to strict ethical and legal guidelines. Browse our practice areas to learn more about how we can help you.</p>
[grid content="page" parent="13" number="all" xs="12" sm="6" md="4" show="image, title" class="text-xs-center top-xs-xxl"]

Shows parent page grid.




“I love this theme! Great flexibility and so many options! But best of all is the responsive customer support.”
<strong class="text-lg">– Linda</strong>




Two col with bg image and form gutter=0

[columns gutter="0"]
[col image="406" align_text="middle" class="text-xl"]
"I've been very happy with my experience with the Mai Theme and the company's support and have been recommending it to others. Thank you!"
- Olivia

"Your theme, instructional videos and tutorials and help are top notch!!!!"
- Lisa
[/col]
[col bg="067ccc" align_text="middle"]
<h3>Schedule a no-cost consultation today!</h3>
We believe in fostering positive, long-term relationships with our clients. Contact us to find out how we can help you achieve the success you deserve.

[ninja_form id="1"]
[/col]
[/columns]




/**--------------------------------------------------------- */

Mai Law Theme Demo "Home Two" END

https://intercom.help/bizbudding/mai-theme/mai-law/mai-law-theme-demo-home-two

/**--------------------------------------------------------- */



/**--------------------------------------------------------- */



Mai Law Theme Demo "Home Three"

https://intercom.help/bizbudding/mai-theme/mai-law/mai-law-theme-demo-home-three





[columns align="middle"] used a lot in two col layouts? Sometimes the [col has align left?

This comes from a two col layout...
[columns align="middle"]
[col align_text="left"]


Commonly used classes...
<p class="text-lg"> 
<strong class="text-lg">

The section text size was set to extra large. So this might re-set the text to a more normal size for the testimonial giver's name?




Mai Law Theme Demo "Home Three" END


/**--------------------------------------------------------- */





More snippetts

This is in the before header bar. 

Does <h4 class="bottom-xs-none"> remove margin/padding from bottom of h4?

<h4 class="bottom-xs-none">Call us today for help!&nbsp;&nbsp;<a class="" href="tel://1-800-555-2840">(800) 555-2840</a></h4>




What do these classes do?

[callout class="text-xs-center text-lg top-xs-xl"]
<h4>
	Schedule A Free Consultation Now!
</h4>
<p>
	Find out how our law firm can help you win your case or you don't pay a cent.
</p>
<a class="button large" href="tel://1-800-555-2840">(800) 555-2840</a>
[/callout]





Clickable phone numbers in the footer

<strong>
YOUR FIRM NAME
</strong>
<br />
<a href="tel://1-800-555-2840">(800) 555-2840</a><br />
<a href="tel://1-212-555-1979">(212) 555-1979</a><br />
<p>524 Market St.<br />
NYC, New York 07840</p>




This aditional CSS for smaller rettina ready logo. Can you choose your own logo width?

.custom-logo-link {
	max-width: 180px;
}