Documentation:

Custom components

Resources library

How to create a single resource?

  1. Go to a directory where you want to have your resources (i.e. home/patologias/cancer)
  2. Create an empty page called "Recursos" and inside add an empty page

    You can also copy a complete solution from https://author.opentemplate.prod.opengarden.rch.cm/sites.html/content/websites/roche-pacientes-2/es/home/recursos and rename.

  3. If you copy-pasted the solution move to 'How to add resources to a page?'.
  4. Inside the empty resource page add a text-media component with an Image item, Headline and a Button in which you should paste a link to the related PDF.
  5. Add content to items

How to add resources to a page?

  1. Add a Content List component.
  2. Inside the component 'configuration' tab add 'resource-library' class and check 'pagination', set items per page to 3.
  3. Go to 'Content Source' tab and change it to External. Underneath click "Add field" button and use the path of the resource source.

Example

IMPORTANT

By default the component automatically inserts PDF cover into the text&media image, so If leave text&media image empty and add link the button to PDF.

Flip cards

Component behavior: Displays 2-sided content box. When user clicks the box it shows the other side.

Setup guide:

  1. Add Section component with a class 'flip-card'
  2. Inside the section add 2 section items, each one is a side of the flip card.
  3. Fill section items with desired content, you can also apply a background by adding a 'background-"color"'.
  4. Flip cards can be nested in columns, if you choose to do so you can apply 'flip-cards' class the columnLayoutBlock component to add top and bottom spacing.

Example

Tabs

Component behavior: when user clicks an anchor, a browser scrolls down to a sectionItem with a corresponding id.

Setup guide

  1. Add Tabs component
  2. Inside it create Tabs items, fill all of the required fields and add content inside

Example

Horizontal Submenu

Component behavior: when user clicks an anchor, a browser scrolls down to a sectionItem with a corresponding id.

Setup guide

  1. Add Menu component with class 'tab-nav'
  2. Add menu items with IDs
  3. Add Section component
  4. Inside the Section add SectionItems with corresponding IDs 

Example

Side submenu

Component behavior: Side navigation has a position fixed to the right side of the screen. When user clicks an anchor, a browser scrolls down to a sectionItem with a corresponding id.

Setup guide

  1. Add Menu component with class 'side-submenu'
  2. Inside add menu items with IDs
  3. Add Section component
  4. Inside the Section add SectionItems with corresponding IDs 

Example

Custom HTML

How to add custom HTML?

For injecting custom HTML into our website a component SVG Editor comes in handy. To use it, simply grab beautified HTML content and paste it into SVG Markup field.

To beautify HTML you can use online open-source tools i.e. https://codebeautify.org/htmlviewer

Example

Color Palette

#000000 - black

#3b4043 - cape cod

#6a7177 - battleship-grey

#778f9b - bluish-grey

#92989e - bluey-grey

#c5c9cc - light-blue-grey

#dbdddf - light-periwinkle

#fafafa - off-white

#ffffff - white

#e9f1f9 - ice-blue

#fef5f1 - very-light-pink

#3883ba - windows-blue

#2174b0 - mid-blue

#33b5e5 - dark-sky-blue

#108484 - greenish-blue

#20bcbc - tealish

#d1410c - brick-orange

#d1720c - meteor

#132c47 - dark-slate-blue