Saigoneer

Skip to content

Back Support Us » Uncategorised » 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

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.
In addition you can add classes to change the font type, you can use this hack for any element

serif-philosopher
Thought's quiet pool, where wisdom pes deep,
In Philosopher’s embrace, sweet silence we keep.

serif-alegreya
In Alegreya’s lines, joy dances free,
Each stroke, a laugh, like waves in the sea.

serif-lora
Lora's words, a lush and winding road,
Soft tales of mystery that softly erode.

serif-noticia
Noticia brings news from lands afar,
With weight and grace, like an ancient star.

serif-gelasio
Gelasio glows, warm and refined,
An old friend’s voice, so gently inclined.

serif-crimson
Deep and rich, the Crimson flows,
In soft, red hues where the passion shows.

serif-rokkitt
Bold Rokkitt strikes with strength, unswayed,
A hammer’s mark, strong lines displayed.

serif-yrsa
Yrsa tells of timeless nights,
Where whispered words fall soft and light.

serif-newsreader
Newsreader’s voice with trusted tone,
Recounts the tales we long have known.

serif-roboto-serif
Roboto Serif, so poised and true,
Guides us through facts, steady and new.

sans-paytone
Paytone’s weight, a booming voice,
In bold display, it makes its choice.

sans-work-sans
Work Sans, strong with every line,
Craftsperson’s touch, so pure and fine.

sans-kanit
Kanit’s sharp angles, vibrant and fast,
In each swift stroke, a story cast.

sans-mulish
Mulish brings clarity, light as air,
Guiding eyes with gentle care.

sans-antic
Antic’s form, so lively and bright,
A playful skip, a touch of light.

script-dancing
Dancing Script sways, elegant and free,
A cursive flow, like leaves on a tree.

script-patrick
Patrick Hand, warm and kind,
Scribbled thoughts, simple and unconfined.

script-mansalva
Mansalva writes with a joyful spark,
Each word alive, a work of art.

display-lalezar
Lalezar shouts, bold and grand,
In vivid hues, it takes its stand.

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

Landscape 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