Woody content page

Graphic kit

powered by Woody Addon Starter

In consectetuer turpis ut velit. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Aenean commodo ligula eget dolor. Fusce vel dui.

Published on 7 February 2023
Harry Cover

Vivamus quis mi. Praesent egestas neque eu enim. Etiam vitae tortor.

Meet harry
  • Info 1
  • Info 2
  • Info 3
Surtitle

Section title

to the left
Surtitle

Section title

centered
Surtitle

Section title

on the right
#genericBlock

Text block title

Subtitle
#focusBlock

MEA block title

Subtitle

Highlights

These are the most used elements on the site: the integration of these elements must be perfect.

Putting it forward

Overlayed

cards x6
Putting it forward

Geolocated

cards x6
The base

Texts and colored backgrounds

Check the behavior of text, titles (hn and .hn), lists, buttons, blockquote… in text blocks on the different color backgrounds.
The set is contained in a group of “swiper” tabs in order to check its behavior.

Title 2 – Mega title

Title 2

Title 3

Title 4

Title 5

Morbi mattis ullamcorper velit. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Vivamus in erat ut urna cursus vestibulum. Praesent ac massa at ligula laoreet iaculis.

In consectetuer turpis ut velit. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Aenean commodo ligula eget dolor. Fusce vel dui.

  • List item 1
  • List item 2
  • List item 3

Main buttonSecondary button

Title 2 – Mega title

Title 2

Title 3

Title 4

Title 5

Morbi mattis ullamcorper velit. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Vivamus in erat ut urna cursus vestibulum. Praesent ac massa at ligula laoreet iaculis.

In consectetuer turpis ut velit. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Aenean commodo ligula eget dolor. Fusce vel dui.

  • List item 1
  • List item 2
  • List item 3

Main buttonSecondary button

Title 2 – Mega title

Title 2

Title 3

Title 4

Title 5

Morbi mattis ullamcorper velit. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Vivamus in erat ut urna cursus vestibulum. Praesent ac massa at ligula laoreet iaculis.

In consectetuer turpis ut velit. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Aenean commodo ligula eget dolor. Fusce vel dui.

  • List item 1
  • List item 2
  • List item 3

Main buttonSecondary button

Title 2 – Mega title

Title 2

Title 3

Title 4

Title 5

Morbi mattis ullamcorper velit. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Vivamus in erat ut urna cursus vestibulum. Praesent ac massa at ligula laoreet iaculis.

In consectetuer turpis ut velit. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Aenean commodo ligula eget dolor. Fusce vel dui.

  • List item 1
  • List item 2
  • List item 3

Main buttonSecondary button

Title 2 – Mega title

Title 2

Title 3

Title 4

Title 5

Morbi mattis ullamcorper velit. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Vivamus in erat ut urna cursus vestibulum. Praesent ac massa at ligula laoreet iaculis.

In consectetuer turpis ut velit. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Aenean commodo ligula eget dolor. Fusce vel dui.

  • List item 1
  • List item 2
  • List item 3

Main buttonSecondary button

Title 2 – Mega title

Title 2

Title 3

Title 4

Title 5

Morbi mattis ullamcorper velit. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Vivamus in erat ut urna cursus vestibulum. Praesent ac massa at ligula laoreet iaculis.

In consectetuer turpis ut velit. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Aenean commodo ligula eget dolor. Fusce vel dui.

  • List item 1
  • List item 2
  • List item 3

Main buttonSecondary button

Title 2 – Mega title

Title 2

Title 3

Title 4

Title 5

Morbi mattis ullamcorper velit. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Vivamus in erat ut urna cursus vestibulum. Praesent ac massa at ligula laoreet iaculis.

In consectetuer turpis ut velit. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Aenean commodo ligula eget dolor. Fusce vel dui.

  • List item 1
  • List item 2
  • List item 3

Main buttonSecondary button

Style of theTitles and icons
SurtitleMain titleSubtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

SurtitleMain titleSubtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

SurtitleMain titleSubtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

SurtitleMain titleSubtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

SurtitleMain titleSubtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

SurtitleMain titleSubtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

Accordion / FAQ
  • Donec vitae sapien ?

    Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Nam commodo suscipit quam. Aenean massa. Aenean imperdiet. Donec id justo.

    Phasellus tempus. Maecenas nec odio et ante tincidunt tempus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. In ut quam vitae odio lacinia tincidunt. Fusce neque.

  • Suspendisse pulvinar augue ac ?

    Donec id justo. Vestibulum dapibus nunc ac augue. Vestibulum eu odio. Fusce a quam. Praesent congue erat at massa.

    Phasellus viverra nulla ut metus varius laoreet. Cras sagittis. Duis leo. Ut leo. Cras sagittis.

    Sed hendrerit. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Donec mollis hendrerit risus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula.

  • Mauris sollicitudin fermentum libero ?

    Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Cras id dui. Vestibulum suscipit nulla quis orci. Curabitur vestibulum aliquam leo. Pellentesque auctor neque nec urna.


Button block

Main and secondary buttons should be clearly distinct, with identifiable hovering and consistent hierarchy.

Sharing links

Make sure that all color backgrounds are well managed and that the share buttons are consistent with the site’s charter.

Quotes

Check that all quotes behave correctly on the various color backgrounds, including illustrated quotation marks where appropriate.

Quote no. 1

Suspendisse feugiat. Nunc sed turpis. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In hac habitasse platea dictumst. etiam rhoncus.

Harry Cover
Quote no. 2

Suspendisse feugiat. Nunc sed turpis. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In hac habitasse platea dictumst. etiam rhoncus.

Harry Cover
Quote #3

Suspendisse feugiat. Nunc sed turpis. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In hac habitasse platea dictumst. etiam rhoncus.

Harry Cover
Quote No. 4

Suspendisse feugiat. Nunc sed turpis. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In hac habitasse platea dictumst. etiam rhoncus.

Harry Cover
Quote #5

Suspendisse feugiat. Nunc sed turpis. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In hac habitasse platea dictumst. etiam rhoncus.

Harry Cover
Quote no. 6

Suspendisse feugiat. Nunc sed turpis. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In hac habitasse platea dictumst. etiam rhoncus.

Harry Cover

Tab groups

Each tab group layout makes it easy to identify that an action is needed and the horizontal/vertical behavior is well handled. Color background management is optimal.

Block

Media Gallery

Check that elements in a gallery conform to the graphic design (rounding, shading, copyright) and that margin indentation is not an issue.

Block

Interactive media gallery

Interactive galleries should behave consistently, text open or closed and the action button should be visible and consistent with the style of the site.

Pellentesque dapibus hendrerit tortor
Pellentesque dapibus hendrerit tortor
Duis leo. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus ullamcorper ipsum rutrum nunc. Pellentesque commodo eros a enim. Cras non dolor.

Section classes / custom blocks

To be completed

This section is to be completed if the site has custom sections or blocks (section classes, layout, color, interactive map…). Note that the list of section classes can be found on the dashboard.

Close