HTML Template Product Pages

Download this guide as .html

Product page guide for inet.se (This is a H2 heading)

A product page is not permitted to contain any H1-headings. This is reserved for the products name. For headings, use H2, H3 and H4.

This is a paragraph text and are achieved with the <p> tag. In this block it is free to use to write longer texts with multiple paragraphs. It is prefered that each paragraph is roughy 200-350 characters.

---

Links

You can include links in your text but please use them sparsely. Links to inet.se should be relative, which means that you remove https://www.inet.se and begin the link with / . This also applies when you use buttons below as links.

If you want to include a link to another website, it's important that the link has these tags added: target="_blank" rel="noopener noreferrer". This also applies when you use buttons below as links.

---

Styling

You can make text bold by using the <b> tag.

If you want to make cursive text, use the <i> tag.

You can decrease the size of the text with the use of the <small> tag.

---

Headings

If the text is long, you are encouraged to include sub headings with <h2>, <h3> and <h4> and line breaks with <hr> .

This is a H3 heading

This is a H4 heading

---

Center

Use the tag <center> around anything you want to center.

---

Lists

• A list with bullets (include <p> tag)

• A list with bullets (include <p> tag)

• A list with bullets (include <p> tag)

1. A list with numbers (include <p> tag)

2. A list with numbers (include <p> tag)

3. A list with numbers (include <p> tag)

---

Buttons

Buttons must be used in a dedicated div with the buttons class.

---

Images

An image can be inserted anywhere inside an element with the column-class. Use inline-styling to decide the maximum size of the image. Make sure to use the classes img-responsive & center-block on the image to make it fit and scale responsively.

To use an image alone in a column, apply the class image to the column to make it fill the width of the column.

Please note! We need to host the images on our server. It is important that you send the images you want to use to your contact at Inet. Image files must be named correctly according to the HTML you provide.

Example of a complete img-element with max-size added:

<img src="https://cdn.inet.se/gfx/ext/226/template/landingpage-hero-image.png" class="img-responsive center-block" style="max-height: 150px;">

---

Video

You can embed a YouTube-video on the page. This is done mostly the same as an image, with some added lines of HTML.

Video elements must be placed inside an element with the class column. with this code:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/bdvtrJkLCQA?vq=hd1080&autohide=1&rel=0&modestbranding=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

The code above can also replace any <img>-element where you want to have a video instead of an image.