HTML Template Campaign Pages
Content guide for inet.se (This is a H1 heading)
Each page is REQUIRED to have one single H1 at the start of the page. This is important for SEO-purposes. On one page there MUST NOT be more than one H1. For other 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 250-500 characters.
Links
It is good to include links in your text to direct the reader to other parts of the website. 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 H2 heading
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)
A list with numbers (include <p> tag)
A list with numbers (include <p> tag)
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.
Tables
| Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | This cell is wider and will wrap when wide enough | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
Hero block left
Paragraph text. Optimal lenght of this is roughly 250-500 characters. You can use several paragraphs. Text color is determined by the parent element classes "white" or "black".
The image to the right should be a .png-file with an aspect ratio of 4/3 and a minimum resolution of 640x480px.
The background image should be a .jpg-file with the size 2500x800px and have a dark image for optimal readability with white text, and the opposite when used with black text.
If you dont want a background and want the text to respond to light/dark mode, just remove the image and text-color class.
Hero block right
Paragraph text. Optimal lenght of each paragraph is roughly 200-600 characters. You can use several paragraphs. Text color is determined by the parent element classes "white" or "black".
The image to the left should be a .png-file with an aspect ratio of 4/3 and a minimum resolution of 640x480px.
The background image should be a .jpg-file with the size 2500x800px and have a light image for optimal readability with black text, and the opposite when used with white text.
If you dont want a background and want the text to respond to light/dark mode, just remove the image and text-color class.
Body Two
Paragraph text. Optimal lenght of each paragraph is roughly 200-600 characters. You can use several paragraphs. Text color is determined by the lightmode and darkmode feature of the website.
The image above should be a .png-file with an aspect ratio of 16x9 and a minimum resolution of 640x360px.
In this block the image stays the same regardless of lightmode or darkmode. Please make sure that the image is clearly visible against both light and dark backgrounds.
You can center the text by wrapping it in the center tag.
Body Two
Paragraph text. Optimal lenght of each paragraph is roughly 200-600 characters. You can use several paragraphs. Text color is determined by the lightmode and darkmode feature of the website.
The image above should be a .png-file with an aspect ratio of 16x9 and a minimum resolution of 640x360px.
In this block the image change based on lightmode and darkmode. To use this feature, add the classes lightmode and/or darkmode to show the content in each mode respectively.
You can center the text by wrapping it in the center tag.
Body Three
Paragraph text. Optimal lenght is roughly 150-300 characters. Text color is determined by lightmode/darkmode.
Image is .png-file, 16x9 and 640x360px.
Make sure image is clearly visible in bothe lightmode/darkmode.
Center text by wrapping it in the center tag.
Body Three
Paragraph text. Optimal lenght is roughly 150-300 characters. Text color is determined by lightmode/darkmode.
Image is .png-file, 16x9 and 640x360px.
Make sure image is clearly visible in bothe lightmode/darkmode.
Center text by wrapping it in the center tag.
Body Three
Paragraph text. Optimal lenght is roughly 150-300 characters. Text color is determined by lightmode/darkmode.
Image is .png-file, 16x9 and 640x360px.
Add classes lightmode / darkmode to show different images in respective mode.
Center text by wrapping it in the center tag.
Body Four
Paragraph text. Optimal lenght is roughly 100-200 characters. Text color is determined by lightmode/darkmode.
Body Four
Paragraph text. Optimal lenght is roughly 150-300 characters. Text color is determined by lightmode/darkmode.
Body Four
Paragraph text. Optimal lenght is roughly 150-300 characters. Text color and image is determined by lightmode/darkmode.
Body Four
Paragraph text. Optimal lenght is roughly 150-300 characters. Text color and image is determined by lightmode/darkmode.