Paragraph library
This page gives examples of the sections and paragraphs that can be used to build out landing pages.
Sections:
Sections provide background colour and column layout, i.e. full width (one col) two column, three, four. Option to add an image as background.
Once the section has been defined, paragraphs can be added to the layout.
Paragraphs:
Paragraphs provide the containers for content. The IOPA site provides the following:
- Navigation card
- Text with side image
- Full width image
- Hero text
- Person card
- Horizontal line
- Custom block
- Carousel
- Basic Text
- Attachments
- Media Embed / Full width video (tbc)
- Block quote
Sections
Sections give a full width background, plus choice of column layout to each area of the page.
You can select a brand colour background or an image which will be displayed full width behind any content that is subsequently added to the section.
Example branding colours:
Light
White
Dark
Black
Dark green
Light orange
Dark orange
Dark red
Light grey with two column layout
Second column
Light green with three column layout
Second column
Third column
Media background
Grey green with four column layout
Second column
Third column
Fourth col
Paragraphs
Once a section with column layout is selected, paragaphs can be added to each column. Examples below.
Navigation cards
For three or four column layouts.
Text with side image
Text width side image provides option for image alignment (left/right) and text colour (dark/light) to improve visibility on different colour sections.
The dimensions of the media added can be cropped and scaled to be uniform on all paragraphs but this will possibly mean this would not be appropriate for a header hero, i.e on the events listings figma mock up - discuss.
Text with side image example
This paragraph is using image right alignment.
The ext is dark on a light background.
Text with side image
In this example - image is left, text is light.
Section background is dark.
Full width image
Full width image is contained within the columns defined in each section. Caption or link is optional.
For a full width background, change the background media used for the section.
Make sure the image dimensions are wide enough for full screen.
Hero text
To be used in conjunction with full width image or carousel to create the page hero. Can use with one column or two. Heading text in branding light green with white subheading.
Institute of Psychoanalysis
Horizontal line
A dark horizontal line to provide division. Includes optional text field below.
Optional text appears below.
Person card
For listings before lightbox full profile on click. Example of how pop up content may look here. (In progress)
Custom blocks
Bespoke cards can be added to one of more pages by creating as a custom block and using the custom block paragraph type to add these to a section.
Who we are
Founded in 1913, the Institute of Psychoanalysis also known as the British Psychoanalytical Society is a charity dedicated to enhancing lives through the intensive talking therapy that is psychoanalysis.
Our members represent a diverse range of countries and cultures and are able to provide psychoanalytic treatment in many different languages. Psychoanalysts trained in the British Society have the highest professional standards and qualifications and our training process is world renowned.
Attachments
Attach files within a page
Carousel
When creating a carousel, save your content between adding each slide. Make sure your images are full width and the same dimensions to avoid the carousel jumping.
Header will appear as a caption, add your media via the media tool within text field
Caption is optional
Full width Video
Add remote videos via their URL - Vimeo / Youtube
Text
h2
h3
h4
h5
h6
Paragraph
Bold
Italic
Link
- Bullet
- Bullet
- Bullet
etc
Blockquote
QuoteA famous quote