Style Guide

Style guide for NoiceSaaS. Learn how to create a professional and visually appealing website or app.

Headings

Header tags play a crucial role in maintaining visual clarity and organization within your content. They aid readers in comprehending your writing and assist search engines in assessing your content effectively.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Callouts

Have you ever felt the need to enhance the presentation of vital information within your posts? With callout cards, you now have the ability to do just that. Each callout card allows for the inclusion of emojis, text of any length with various styles and links, and even offers customization options for background colors.

This is a warning callout card. It's a great way to showcase your content and encourage engagement.
Be careful with this callout card. It's a great way to showcase your content and encourage engagement.
This is a successful callout card. It's a great way to showcase your content and encourage engagement.

Quotes

You can make quotes stand out with two types of blockquote styles that can be applied directly in the editor.

This platform is a fully open source, adaptable tool for building and running a modern online publication. It empowers blogs, magazines, and journalists from various industries.

Images

When you begin blending text and image cards creatively, the narrative of the story undergoes a transformation. You find yourself operating within a new format, where images seamlessly integrate into your content at various sizes—normal, full, and wide—and captions can be added wherever necessary.

Example image

Gallery

This template supports image galleries, all of which are responsively optimised and organised to look their best no matter how many images you add or remove.

Image 0
Image 0
Image 1
Image 1
Image 2
Image 2
Image 3
Image 3
Image 4
Image 4
Image 5
Image 5
Image 6
Image 6
Image 7
Image 7
Image 8
Image 8

Buttons

You can incorporate call-to-action buttons into your posts using Button component. These buttons offer flexibility in alignment, allowing for center or left alignment, and can feature custom button text. Additionally, they can be linked to any URL, providing versatility in directing your audience to desired destinations.

Accordion

Utilize the Accordion component to implement collapsible sections of text within your posts and pages. This feature is ideal for creating distinct sections in your content or for incorporating an FAQ section.

Links

This is an example of anchor https://noicethemes.com. Remember to make them accesible by using the `aria-label` attribute!

Lists

Unordered list

Ordered list

  1. Item number one
  2. Item number two
    1. A nested item
    2. A nested item
  3. A final item

Highlighting

Customize the appearance of selected text highlighting. Feel free to try selecting this text yourself.

Responsive Tables

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.

Name Role Department Email
John Doe Senior Developer Engineering john@example.com
Jane Smith Product Manager Product jane@example.com
Bob Johnson Designer Design bob@example.com
Alice Brown Marketing Lead Marketing alice@example.com

Code

You can embed code directly within your content. Here's an example in JavaScript: 

const foo = 'bar';