Main Content
Images are incredibly important to HTML email, and can often mean the difference between an effective email and one that gets a one-way trip to the trash bin. An image with a caption - whether it’s one line or a paragraph - is one of the most common design patterns found on the web and in email. Captioned images follow 4 basic configurations, where an image is accompanied by text content on the top, right, bottom, or left of an image. Occasionally,
The Eiffel Tower |
you’ll see combinations of those configurations.
Generally speaking, the architecture behind these content blocks is very simple: a single table with two cells that contain the image and text separately. The table is styled with a background color and border, and text styling is applied on the text cell. For spacing, padding is applied to both cells.
The Eiffel Tower, designed by Gustave Eiffel and built in 1889, is located in Paris, France. For 41 years, it was the tallest man-made structure in the world. |
The Eiffel Tower |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.
H2 level heading
The Eiffel Tower, designed by Gustave Eiffel and built in 1889, is located in Paris, France. For 41 years, it was the tallest man-made structure in the world. |
The Eiffel Tower |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.