---
type: Post
title: Next.js Blog Theme Style Guide
description: >-
  A style guide for a website is a set of design standards that define the look,
  feel, and behavior of a digital product, ensuring consistency and cohesion
  across all pages and elements.
date: '2024-11-06'
---
A style guide for a website is a set of design standards that define the look, feel, and behavior of a digital product, ensuring consistency and cohesion across all pages and elements. It typically includes guidelines for colors, typography, spacing, buttons, icons, and imagery, as well as instructions on voice and tone for content.

# h1 Heading

## h2 Heading

### h3 Heading

#### h4 Heading

##### h5 Heading

###### h6 Heading

## Horizontal Rules

***

## Emphasis

**This is bold text**

**This is bold text**

*This is italic text*

*This is italic text*

~~Strikethrough~~

## Blockquotes

> Blockquotes can also be nested...
>
> > ...by using additional greater-than signs right next to each other...
> >
> > > ...or with spaces between arrows.

## Lists

Unordered

*   Lorem ipsum dolor sit amet
*   Consectetur adipiscing elit
*   Integer molestie lorem at massa

Ordered

1.  Lorem ipsum dolor sit amet
2.  Consectetur adipiscing elit
3.  Integer molestie lorem at massa

## Code

Inline `code`

Block code

```
npm install netlify-cli -g
```

Syntax highlighting

```js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

## Tables

| Option | Description                                                               |
| ------ | ------------------------------------------------------------------------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default.    |
| ext    | extension to be used for dest files.                                      |

Right aligned columns

| Option |                                                               Description |
| -----: | ------------------------------------------------------------------------: |
|   data | path to data files to supply the data that will be passed into templates. |
| engine |    engine to be used for processing templates. Handlebars is the default. |
|    ext |                                      extension to be used for dest files. |

## Links

*   [Next.js on Netlify](https://docs.netlify.com/frameworks/next-js/overview/)
*   [Use Visual Editor with Next.js](https://docs.netlify.com/visual-editor/frameworks/next/)

## Image

Recommended image orientation is horizontal. You can adjust the image component to your needs in `components/CustomImage.js`.

![Image alt text](/images/random-image.jpeg "Image Title")
