Text and Image Layouts

Section 1

The mobile view

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.

Section 2

The mobile view

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.

Section 3

The mobile view

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.