# Basic layout example In this section, you're going to learn how to code a basic email template using MJML. Here is the final render we want to end with:

sexy

try it live

Looks cool, right? ## Sections ``` html ``` First, we will implement the skeleton which are the sections. Here, our email is going to be divided into 6 sections. ## Company Header ``` html My Company ``` The first section of the email consists in a centered banner, containing only the company name. The following markup is the MJML representation of the layout we want to obtain. The text padding represents the inner space around the content within the `mj-text` element. ## Image Header ``` html Slogan here Promotion ``` Next comes a section with a background image and a block of text (representing the company slogan) and a button pointing to a page listing all the company promotions. To add the image header, you will have to replace the section's background-color by a background-url. Similarly to the first header, you will have to center the text both vertically and horizontally. The padding remains the same. The button `href` sets the button location. In order to have the background rendered full-width in the column, set the column width to 600px with `width="600px"`. ## Introduction Text ``` html My Awesome Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus. Learn more ``` The introduction text will consist of a title, a main text and a button. The title is a regular `mj-text` that can be customized. ## 2 Columns Section ``` html Find amazing places Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus. ``` This sections is made up of 2 columns. One containing an image, the other one containing a text. For the image part, note that when a tag does not have any child, you can use the XML self-closing tag syntax: `` For the text part, you are going to need two ``s like above. One with a title format, and the other one as a regular text. ## Icons ``` html ``` This section is a 3-columns-based section. Please notice you can make the padding vary to change the space around the images. ## Social Icons ``` html ``` The MJML standard components library comes with a `mj-social` component. By default, every social network is enabled. To disable some of them, just use their names as an attribute with a `false` value. Here, we're going to use `facebook` only.