Text and Image Layouts

Section 1

introductory section 1 mobile original 2

The mobile view

introductory section 1 desktop original 2

The desktop view

Mobile View:

  • Images and text arranged vertically.
  • Text includes a headline, title, description, icon list.
  • A credit with image and text (name and position)
  • The desktop version is divided in two halves taking 50% width each.
  • The mobile version arranges the two sections vertically.

Desktop View:

  • Content split 50/50 (adjustable)
  • Images on the left, text on the right, can be swapped.
  • Text includes a headline, title, description, icon list
  • A credit with image and text (name and position)

View in a browser:

  • Click the button below to view the section on a web page.
  • When viewing on a desktop, try narrowing the screen to see the mobile view.
View in a Browser

Section 2

text and images section mobile sized 1

The mobile view

text and images section desktop sized 2

The desktop view

Mobile View:

  • The title, description, images and quote are arranged vertically on a mobile.

Desktop View:

  • Content split 50/50 (adjustable)
  • Title, description and image stacked on the left.
  • An image and quote stacked on the left.

View in a browser:

  • When viewing on a desktop, try narrowing the screen to see the mobile view.
View in a Browser

Section 3

text and images section mobile original 2

The mobile view

text and images section desktop sized 3

The desktop view

Mobile View:

  • Comprises a headline text, title text, descriptive text, an image followed by more text and a button.
  • The items are stacked one beneath the other.

Desktop View:

  • Comprises a headline text, title followed by a 3 column layout of text, an image and text with a button.

View in a browser:

  • When viewing on a desktop, try narrowing the screen to see the mobile view.
View in a Browser

Section 4

hero image 7 mobile sized

The mobile view

hero image 7 desktop sized

The desktop view

Mobile View:

  • Super title, title and description with button stacked vertically, followed by two images plus title and descriptive text

Desktop View:

2 column layout with super title, title and description with button on the left and two images with title and descriptive text on the right.

View in a browser:

  • When viewing on a desktop, try narrowing the screen to see the mobile view.
View in a Browser

Section 5

a woman working on a laptop

The mobile view

a table with a lamp and a plant

The desktop view

Mobile View:

  • Single column layout with title & description with image underneath.

Desktop View:

  • 2 column layout with title & description on the left, image on the right

View in a browser:

  • When viewing on a desktop, try narrowing the screen to see the mobile view.
View in a Browser