Paragraph Overview
This page should show you the different paragraphs and how to use them with different designs or options.

1. PARAGRAPH TYPE: Title and text

This paragraph can be used at the beginning of pages.
It is an H1 heading and may only appear at the top of a page and may only be used once.

For example, at: 
- News 
- Events
- Landing pages

You can choose whether the title header has a back button or not. 

Title and text: Entry of a page - Title

Headline example - H1
Appearance Settings: Dark theme
Headline example with back button - H1
Appearance Settings: NO Dark theme

2. PARAGRAPH TYPE: Text

This is a very simple text paragraph that can be inserted on any page. 
You can set the text left-aligned, centered or Justified

Text - Left aligned

Only text without images/video:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text - Centered paragraph -
Left aligned Text

Only text without images/video:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text - Centered paragraph -
Justify Text

Only text without images/video:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text - Centered paragraph -
Centered Text

Only text without images/video:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

3. PARAGRAPH TYPE: Media text

When selecting the "Media text" paragraph, several options of presentation are available. 

Leica Headquater

Media Text - Image left alignment

Paragraph Heading tag: H2 or H3

Imagesize: 1920x1280px

There is no option to crop the image

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 

SL3 front view

SL3 Technical Details

Camera type Digital system camera with rangefinder
Dimensions 139 x 38,5 x 80mm
Weight Black: approx. 530 g/455 g (with/without battery)
Silver: approx. 640 g/565 g (with/without battery)
Material Black: full-metal housing made of magnesium and aluminum, leatherette cover
Silver: full-metal housing made of magnesium and brass, leatherette cover
Buffer memory 3 GB
SL3 front view

SL3 Technical Details

Camera type Digital system camera with rangefinder
Dimensions 139 x 38,5 x 80mm
Weight Black: approx. 530 g/455 g (with/without battery)
Silver: approx. 640 g/565 g (with/without battery)
Material Black: full-metal housing made of magnesium and aluminum, leatherette cover
Silver: full-metal housing made of magnesium and brass, leatherette cover
Buffer memory 3 GB

Media Text + 2 images right alignment

Paragraph Heading tag: H2 or H3

Imagesize: 1920x1280px

There is no option to crop the image

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 

Leica Headquater

Media text - with colored background

Image size: 1920x1280

Appearance Settings: without - Remove Top padding/Remove Bottom padding

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Leica Headquater

Media text - with colored background

Image size: 1920x1280

Appearance Settings: with - Remove Top padding/Remove Bottom padding

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Drupal Button

Media Text with text button (opening new window)

Below you can find buttons in different styles. For external links (outside the Leica homepage) please use the "Open in a new window" option. (see left image)

Button Secondary - Same Window

Button Primary - New Window

Which buttons to use when

Primary Button

The primary button is used for the most important action on a page or in a view. We use this button to guide users towards our goal conversion. Please use the primary button only once on a page.

Secondary Button

The secondary button is used for subordinate actions.

Button Secondary

Simple Button - Does not yet work

The simple button is applied as a subtle call to action.

Button (simple light)

 

Button Group

Buttons can be grouped to offer multiple actions side by side.

e.g. Leica Account

Register now Log in

e.g. Download Foto App 

App Store Google Play

Leica Headquater

Media text with button created in button section (style: secondary)

Below you can find a button created in the button section. Here you can choose the secondary or primary Button.
In the text field you can only choose the secondary Button.

Homepage

4. PARAGRAPH TYPE: Media

When selecting the "Media" paragraph, several options of presentation are available.

Under appearance settings, a colored background can be stored for each option

Media

Image "Master/Default" (3840x2560) and "Full with" (3840x2560) = both options look the same
with cropping
Leica head quarter outside

Media

Images as a "Slider" - variant "Master/Default" 3840x2560 with colored background

Media

Images as a "Grid" 3840x2560, 1920x1280 is also possible

Media

Images as "Portrait"

Media

A video in "Full with" and "Master/Default" = both options look the same

Media

A video in "autoplay"

5. PARAGRAPH TYPE: Hero content

This paragraph is perfect for within a page with text on the image and the possibility to create a button.

Master

Hero Content with Topline (Text center left) and Button in Button section

Hero Content

- Image size: 3840x2560
- Paragraph view mode: Master, you can see the text in the Texteditor - Full screen teaser, you can´t see the text only the headline
- You can change the text position on the image, right, center, left and top, center, bottom
- You can use one or more images, the text always stays in the same position

Calvin Courjon en Ecosse avec le D-LUX 8
Full Screen Teaser

Hero Content (Text center/center)

6. PARAGRAPH TYPE: Hero image

The paragraph "Hero image" is used at the top of a page - there are different variations here:
- Hero overview design
- Master/Default

Hero image - "Hero Overview Design"

- Image size: 3840 x 2560
- Flexible Image + Cropping
- Important: With "Hero overview design" NO BUTTON WILL BE DISPLAYED

Headline - H1

Lorem ipsum
Leica head quarter outside

Hero image - "Master/Default"

- "Master/Default" and Hero banner = both options look the same
- Image size: 3840 x 2560
- with the option “Dark Theme” , you can set the button color to white or dark grey

Leica head quarter outside

Headline - H1

Lorem ipsum

7. PARAGRAPH TYPE: Testimonial

Can be used for quotes - with or without portrait image. 

Kylie Shea with a leica camera

Testimonial: especially used in stories => a photographer's blockquote with or without image.
Image size: 1920 x 1280

Max Mustermann

Testimonial: especially used in stories => a photographer's blockquote with or without image.
Image size: 1920 x 1280

Max Mustermann

8. PARAGRAPH TYPE: Content Teasers

- Teaser images must always be cropped for correct display!
- Under appearance settings, a colored background can be stored for each option

9. PARAGRAPH TYPE: Media text wrapper

- They can be used with our without a button
- Column design can only be used without images 
- Slider Items can be used with images and with or without background  color (black, white or colored)

Media text wrapper - Column design - without images

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Media text wrapper - Slider items

Image size: 3840 x 2560 or 1920 x 1280

SL3 Technical Details

Image size: 3840 x 2560 or 1920 x 1280

10. PARAGRAPH TYPE: Two or Three columns

- Can be used to display 1 or more "overlay" boxes with mandatory Button. 
- Max. 3 Boxes side by side in desktop view.
- In our special case we use it for Leica Account vs. Leica Online Store

Your Leica Account

Text: 

Product Registration, warranty and support. 

  • Management of products 
  • Extension of warranty
  • 3 free editions of LFI magazine
  • Personalization of content 

Leica Online Store Account

Conveniant shopping, order tracking & more. 

  • Check your order history
  • Track your orders
  • Easily manage your shipping and payment preferences
  • Manage your Akademie bookings

Third column

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

  • invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • At vero eos et accusam et justo duo dolores et ea rebum. Stet
  • clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
  • dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
  • elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 

Your Leica Account

Product Registration, warranty and support. 

  • Management of products 
  • Extension of warranty
  • 3 free editions of LFI magazine
  • Personalization of content 

Your Leica Account

Product Registration, warranty and support. 

  • Management of products 
  • Extension of warranty
  • 3 free editions of LFI magazine
  • Personalization of content 

This module can also be used for a product comparison, for example

M11

Camera type Digital system camera with rangefinder
Dimensions 139 x 38,5 x 80mm
Weight Black: approx. 530 g/455 g (with/without battery)
Silver: approx. 640 g/565 g (with/without battery)
Material Black: full-metal housing made of magnesium and aluminum, leatherette cover
Silver: full-metal housing made of magnesium and brass, leatherette cover
Buffer memory 3 GB

M11-D

Camera type Digital system camera with rangefinder
Dimensions 139 x 38,5 x 80mm
Weight Black: approx. 530 g/455 g (with/without battery)
Silver: approx. 640 g/565 g (with/without battery)
Material Black: full-metal housing made of magnesium and aluminum, leatherette cover
Silver: full-metal housing made of magnesium and brass, leatherette cover
Buffer memory 3 GB

11. PARAGRAPH TYPE: Newsletter

There are 3 variants:
- with black background
- with white background
- with picture

12. PARAGRAPH TYPE: Find a Store/Dealer

There are 2 variants:
- with and without image

13. PARAGRAPH TYPE: Zoom

This module does NOT work properly and is rarely used!

This module is suitable for linking to stories, here you have the option of displaying more text and linking to a story page as well as zooming into the image.

Image
picture collage of cambodian streets

Image Zoom Headline

Short text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.