I'm a `h2` heading

I'm a `h3` heading

I'm a `h4` heading

I'm a `h5` heading

I'm a `h6` heading

I'm a regular paragraph p. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi perferendis non vel dolore in a iste ea eum vero ullam consectetur laudantium deleniti error magnam, officia at doloribus, fugit natus.

I'm a li list element, inside an ul unordered list.
I'm another li list element.
I'm another li list element.

I'm a li list element, inside an ol ordered list.
I'm another li list element.
I'm another li list element.

I'm a paragraph with class image-caption. Above a standard image inside a paragraph.

I'm a quote.
Basically a paragraph with class quote.
To force a line jump you can use a br element at the end of each line.

I'm a quote-serif.
Basically a paragraph with class quote-serif.
To force a line jump you can use a br element at the end of each line. John Doe. Use an optional span element to include the author of the quote in it.

Sometimes you want to create bigger margins to make the element stand out more, use the class big-margins.

Sometimes you want to make the text left aligned, use the class text-left.

Sometimes you want to make the text right aligned, use the class text-right.

Sometimes you want to make the text center aligned, use the class text-center.

I'm a caption wrapped in a div with class smallest, together with the image above.

I'm a caption wrapped in a div with class smaller, together with the image above.

I'm a caption wrapped in a div with class bigger, together with the image above.

I'm a caption wrapped in a div with class biggest, together with the image above.

I'm a caption wrapped in a div with class full-width, together with the image above.

Device aware images

The image below changes based in your device screen, the suffix identifies the version your browser loaded.

Multiple images in a row

The following blocks are coming from a very powerful layout tool, divs with class one-row.

I can accomodate any number of images in one row (desktop). The space will be given proportionally.

In the past I could just host images of the same aspect ratio. Now I'm upgraded and I can host multiple kinds, but I need some help to figure things out.

Above a normal one-row div element, with 2 images of the same size.

The current version lets you use different aspect ratios. There's 2 ways of doing things. A simple and a precise one.

For the simple version just add a class landscape to the image div wrapper of the landscape oriented images. Some cropping may occur accros the row images.

Some examples below:

For more precise control, there's different classes to add to the image wrapper based in the original aspect ratio.
Explicit aspect-ratio classes:

a-3-4
a-2-3
a-1-1
a-4-3
a-3-2
a-16-9
a-21-9

one-row also works with text now. It will make the neighbor image higher if the text is longer (some cropping may occur), so they're always side by side.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi harum, qui aliquid ducimus est quo eligendi quod similique pariatur magnam ad facilis architecto, sit modi temporibus ratione officia. Atque, animi.

Below other classic ways of floating images within text.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est quis ratione ullam dolore dolorem, consequatur tempora minima voluptatum assumenda, rem vel perferendis placeat cupiditate quos facere eaque nostrum! Repudiandae, earum!

The width is based in the total width of the page, and there's a limit to it. You can modify the width with:

fifth-width
quarter-width
third-width
half-width

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est quis ratione ullam dolore dolorem, consequatur tempora minima voluptatum assumenda, rem vel perferendis placeat cupiditate quos facere eaque nostrum! Repudiandae, earum!

Content centered side by side (New)

Wrapping elements with the class flex-centered you can make the content centered side by side, use width modifiers to control the desired widths. In mobile it will collapse in a column instead of a row.

fifth-width
quarter-width
third-width
half-width

“Con cò mà đi ăn đêm,
Đậu phải cành mềm lộn cổ xuống ao.
Ông ơi ông vớt tôi nao,
Tôi có lòng nào ông hãy xáo măng.
Có xáo thì xáo nước trong
Đừng xáo nước đục đau lòng cò con”.

A con cò goes to look for fish during the night
Landing on a soft branch, it tumbles down a pond
Mister, could you help to scoop me up
And if I shall betray you, you could cook me
In case you do, please use clean water to cook
Don’t cook me with dirty water, my children would be hurt

Lanscape and Portrait Grid

Add the class flex-vertical to children wrapper divs of one-row to create grid layouts that are either portrait or landscape. It can be combined with the flex-centered class to center the content vertically.
In mobile it will collapse in a column instead of a row.

Columns (New)

Two Columns

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur exercitationem doloremque, amet nobis distinctio nostrum itaque quisquam provident impedit ea, eligendi facere accusantium atque corporis. Omnis deleniti quasi quod reiciendis, amet assumenda rerum, tenetur, nobis dolorum officia neque officiis. Molestias atque, ut veritatis enim corrupti, error eligendi suscipit velit facilis magnam, quas quos itaque maiores laboriosam asperiores exercitationem consequuntur at et vero quae soluta nihil! Iste quis tempore voluptatem repellat.

Three Columns

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur exercitationem doloremque, amet nobis distinctio nostrum itaque quisquam provident impedit ea, eligendi facere accusantium atque corporis. Omnis deleniti quasi quod reiciendis, amet assumenda rerum, tenetur, nobis dolorum officia neque officiis. Molestias atque, ut veritatis enim corrupti, error eligendi suscipit velit facilis magnam, quas quos itaque maiores laboriosam asperiores exercitationem consequuntur at et vero quae soluta nihil! Iste quis tempore voluptatem repellat.

For rich media like iframes and videos or other elements you need a wrapper with a class iframe and another from the following list:

one-one-ratio
three-two-ratio
sixteen-nine-ratio
twentyone-nine-ratio

<div class="iframe sixteen-nine-ratio"> IFRAME OR VIDEO CODE </div>

Code Blocks

There's some special code blocks for certain components.

Hem Gems and Ngo Nooks detail box and map:

<div class="listing-detail"> <p data-icon="a">NAMEOFDISH</p> <p data-icon="k">NAMEOFRESTAURANT AND ADDRESS</p> </div> <p>{mosmap address='ADDRESS' | lat='LATITUDE' | lon='LONGITUDE' | text='NAMEOFRESTAURANT AND ADDRESS' } </p>

Cafe Nhà Phạm

1st Floor, Block D, 129 Le Van Duyet, Ward 3, Binh Thanh, HCMC

JavaScript must be enabled in order for you to use Google Maps.
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then try again.

Events detail box and map:

<div class="event-detail"> <p data-icon="c">DATES</p> <p data-icon="j">TIMES</p> <p data-icon="k">VENUE NAME & ADDRESS</p> </div> <p>{mosmap address='ADDRESS' | lat='LATITUDE' | lon='LONGITUDE' | text='NAMEOVENUE NAME & ADDRESSVENUE' } </p>

23rd May 2021 - 29th May 2021

9:00am - 5:00pm

Rei Bar & Artspace | 371/4 Hai Ba Trung, Ward 8, District 3, HCMC

JavaScript must be enabled in order for you to use Google Maps.
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then try again.

Saigoneer

Layout Cheat Sheet

I'm a `h2` heading

I'm a `h3` heading

I'm a `h4` heading

I'm a `h5` heading

I'm a `h6` heading

Device aware images

Multiple images in a row

Content centered side by side (New)

Lanscape and Portrait Grid

Columns (New)

Two Columns

Three Columns

Code Blocks

Saigoneer

Layout Cheat Sheet

I'm a h2 heading

I'm a h3 heading

I'm a h4 heading

I'm a h5 heading

I'm a h6 heading

Device aware images

Multiple images in a row

Content centered side by side (New)

Lanscape and Portrait Grid

Columns (New)

Two Columns

Three Columns

Code Blocks

I'm a `h2` heading

I'm a `h3` heading

I'm a `h4` heading

I'm a `h5` heading

I'm a `h6` heading