CMS

Design Style Guide

Feb 4, 2025

Headings H2

Headings are important for indexing a web page’s layout and ranking its content in search engines. They are also used to highlight important topics, provide valuable information, and provide insight into the document’s structure.

Headings H3

Behold the H3 essence, a subtle guide through cosmic realms. In the tapestry of your content, I weave threads of intrigue, inviting exploration and curiosity.

Headings H4

Witness the H4 echo, a humble companion in the vastness of your digital universe. Together, we set a rhythm, subtly preparing the audience for the unfolding journey.

Headings H5

I am the h5 undertone, a soft hum in your page’s symphony. I contribute to the atmosphere with modesty, beckoning readers to delve into your narrative’s subtleties.

Callouts

Discover inspiration in each callout below – concise bursts of creativity and innovation. Dive into the essence of our narrative through these succinct gems.

Quotes

Delve into the wisdom of our quotes section, where profound thoughts and eloquent expressions converge. Here, each quote is a glimpse into the ethos that defines our journey. Let these words resonate and inspire as you navigate the realms of insight and reflection.

Middle Earth advice: Never trust a hobbit with your snacks – they have a second breakfast agenda!

Just keep the quote relevant, that’s all.

Lists

Unordered List

  • Grocery shopping

  • Complete work assignment

    • Review project proposal

    • Prepare presentation slides

  • Exercise routine

  • Call a friend

Ordered List

  1. Plan vacation itinerary

  2. Research flight options

    1. Compare prices

    2. Check travel restrictions

  3. Pack essentials

    1. Clothes

    2. Toiletries

    3. Documents

  4. Confirm accommodation reservations

Highlighting

Highlighting text adds a vibrant touch to your document, making important information pop off the page.

Single Image

This component displays a single image in your blog content. It offers width options such as normal, wide, and full width.

Gallery

We enable image galleries with up to 12 optimally organized images, ensuring a polished appearance regardless of the quantity added or removed.


Code

We enable image galleries with up to 12 optimally organized images, ensuring a polished appearance regardless of the quantity added or removed.

.code-container {

 max-width: 800px;

 margin: 50px auto;

}

.code-container {
  max-width: 800px;
  margin: 50px auto;
}

Video

Elevate your blog with self-hosted videos for complete control and customization. Break free from third-party platforms, ensuring your audience a seamless and personalized viewing experience.

Subscribe Form

Bold section headings in your writing and on your pages create an enticing expression. This versatile card supports various variations, featuring an intriguing main title, a brief subtitle, an accent color option, an attention-grabbing image background, or a combination of both.

🔥

Tech Trends Unveiled: Stay ahead of the curve with our exclusive tech insights. Your guide to tomorrow’s innovations.

You can download the PDF here

You can download the PDF here

You can download the PDF here

Monoline illustration of a merman, the symbol or logo of Sailors & Mermaids
Monoline illustration of a merman, the symbol or logo of Sailors & Mermaids
Monoline illustration of a merman, the symbol or logo of Sailors & Mermaids
Sailors & Mermaids Flag

Copyright

© 2009–2025

Sailors & Mermaids. Oh, look, a Privacy Policy.

Sailors & Mermaids Flag

Copyright

© 2009–2025

Sailors & Mermaids. Oh, look, a Privacy Policy.

Sailors & Mermaids Flag

Copyright

© 2009–2025

Sailors & Mermaids. Oh, look, a Privacy Policy.