Cool

Kitchen Sink

Hello!

Various Heading Styles and Text Formats

HTML has a total of 6 possible headings, from h1-h6. H1 is used as the main title of the page. There should only be one h1. The majority of the headings should be h2.

Subheading for More Topics

Use h3 to breakdown a major topic into smaller sections. The size of h3 is also large enough to show that it's a heading.

Smaller Less Emphasized Headings

Heading of size 4 is probably the last type of heading you want to use. Anything smaller is probably redundant and should warrant a new type of H2.

This Type of Heading is Rarely Used

It's an h5 and just a little larger than a pargraph text. It's really difficult to differentiate between the heading and paragraph so you might as well not use it.

This is a Really Tiny Heading If It's Even Needed At All

H6 headings are almost the same size as paragraph text. Actually, some themes make it the same size as paragraph, just bolder and blacker.

We probably won't encourage H6, but it's there if you need it.

Sample Paragraph with List and Text Formats

The in-app help center is your go-to resource for immediate assistance. It provides:

  • Searchable Knowledge Base: Quickly find answers to common questions and issues.
  • Searchable Step-by-Step Guides: Detailed tutorials to help you navigate and utilize [SaaS Product] features.
  • Searchable Video Tutorials: Visual guides for a more comprehensive understanding.

To access the help center, click on the help icon located in the top-right corner of the application. You can also type node ./contito-help.js to access the terminal help.

The quickest way is probably pressing the keyboard short CMD + K when the website is active.

Blockquote Sample

The only limit to our realization of tomorrow is our doubts of today.

Table

Name

Age

City

John Do

32

New York

Jane Smit

25

Los Angeles

Sam Brown

35

Chicago

Accordion

What is HTML?
HTML stands for HyperText Markup Language. It is the standard language for creating web pages and web applications.
What is CSS?
CSS stands for Cascading Style Sheets. It describes how HTML elements are to be displayed on screen, paper, or in other media.
What is JavaScript?
JavaScript is a programming language commonly used to create interactive effects within web browsers.
What is a web server?
A web server is a computer system that hosts websites and delivers web pages to users' browsers upon request.
What is responsive design?
Responsive design is a web design approach that makes web pages render well on a variety of devices and window or screen sizes.

Code Block

This is a sample block of code showing Javascript code.

javascript
// Sample JavaScript code
function greet(name) {
  if (name) {
      console.log(`Hello, ${name}!`);
  } else {
      console.log('Hello, world!');
  }}

// Call the function
greet('Alice');
greet();

Nested Lists

Nested list should be formatted nicely like below. The numbering of ordered list should not break even if it contains a list of bullet points.

  • Fruits
  • Apple
  • Banana
  • Cherry
  • Vegetables
  • Carrot
  • Broccoli
  • Spinach
  • Dairy
  • Milk
  • Cheese
  1. Cheddar
  2. Swiss
  3. Gouda
  • Yogurt

Callouts

Here are different types of callouts you can use to emphasize certain information, such as important notes, warnings and tips.

An info can describe some important piece of information that supplements your text

Use warning callout to alert users of potential pitfalls or common errors

Tips are always useful as it helps users achieve better results

Danger callouts tell your user what not to do

Image

The image below is added directly into the Google Document where Google uploads it to their CDN.

If a layout uses a featured image such as a blog BLG-001 template, then the image below might not be visible depending on how the layout is coded.

For example, BLG-001 uses the first image it finds as the featured image thereby hiding the image if it’s used in the body of the content.

The image below is an (Image) component, with its src option directly referencing the original Unsplash url.

For Debug

  • Check Credentials: Verify username and password correctness.
  • Browser Compatibility: Try accessing from different browsers.
  • Password Reset: Use the "Forgot Password" option for password recovery.