Everyone must do their job. Developed countries and emerging economies must contribute.
Simple Styleguide components
Image Displays
Default View mode
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Brake Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Align left and wrap text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Align center and break text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Align right and wrap text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Full Width View mode
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Brake Text
Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Align left and wrap text
Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Align center and break text
Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Align right and wrap text
Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Margin configuration in layout builder
Add the section you need or find the one you need to add margins.
In Configure Section, click on second tab: Styles > Spacing
There is a chart: paddings are green and margins are yellow.
Select the margin side needed clicking the matching tab (hover to ensure which margin side is):
- All the margins
- Left margin
- Top margin
- Right margin
- Bottom margin
Then, use the progress bar to find the margin needed. The highest value is on the right.
It has not added in this tool all the values used in the development. They have been simplified and set these common values in the sections across the site:
4px, 8px, 16px, 20px, 24px, 32px, 52px and 64px.
Title with blue line
H1 Title
In h1 tags the blue line always sets because of the migrate content. We can remove the blue line from <h1> adding 'no-blue-line' class to 'wraper classes' in "Title" field from layout builder.
Title on the left
In layout builder section, select 'Add block' and select title block or whatever custom block you want to add and find and:
- In 'configure block' write the title and keep the check active to display it.
- In 'manage block' > title attributtes add these clases: blue-line--left mb-8
Centered Title
In layout builder section, select 'Add block' and select title block or whatever custom block you want to add and find and:
- In 'configure block' write the title and keep the check active to display it.
- In 'manage block' > title attributtes add these clases: blue-line--center mb-8
Grey Title Block
Add the section: Bootstrap 1 Col
In Configure Section, click on Settings -> Container Settings:
- Container boxed, and no-gutters.
In structure/block/block-content pick a Basic Block and create a 'custom block' with just the title, or the title + substitle.
There are two different ways to style this block. Configure Section -> Settings -> Container Settings -> Container Wrapper Classes:
- If you want the text centered, then apply the class "title-bg-grey-center".
- If you want the text aligned to the left (container), then apply the class "title-bg-grey".
You can add more styles to this titles if you need.
Block Manage Attributes -> Block Attributes -> Class(es): e.g. -> ".blue-line-left"
Title Grey Background Default
Title Grey Background
With added description as a subtitle
Title Grey Background aligned to center and style classes added to the block
Inline buttons
Applicable to any custom block in which you insert a button.
In this demo we will use a basic block an we will add some buttons with CKEditor, so you can see it clearly.
If you want one button and the next one below, you shouldn't do anything, however, if you want to place the buttons inline, you should do the following:
- Add the button text.
- Select it and click in link icon or press Ctrl + K with the text selected.
- Add link URL and turn on the checkbox called "Inline Buttons".
Add bootstrap 5 spacing classes you need in the links.
Vision Block Styles
Add section: Bootstrap 2 Cols
In Configure Section, click on Settings -> Container Settings:
- Container boxed and no-gutters
- Extra large/Desktop/Tablet: 50%/50% Mobile: 100%
- Then you add on Container wrapper class: "logo-group"
- Then you add on Columns Settings Col 1 Classes: "pe-md-10 d-flex align-items-center justify-content-md-end justify-content-start mb-8 mb-md-0" and in Col 2 Classes: "d-flex align-items-center"
In structure/block/block-content pick a Basic Block and create a 'custom block' for each logo. Select the image by clicking 'insert media' from CEditor toolbar. Clicking 'translate' tab the translation can be added.
In layout builder section, add each custom block in each column.
Icon with text
In Configure Section, click on Settings -> Container Settings:
- Container boxed and no-gutters
- Extra large/Desktop/Tablet: 33%/33%/33% Mobile: 100%
- Then you add on Container wrapper class: "icon-group"
In structure/block/block-content pick a Basic Block and create a 'custom block' for each content column. Create two links trought 'link' from CKEditor toolbar:
- Icon link: Choose an icon from Font Awesome 6 and Humanitarian Icons | Font Awesome. Then add these two class: ' fa-solid fa-helmet-un'
- Add another link with text and no classes.
Clicking 'translate' tab the translation will be added.
In layout builder section, add each custom block in each column.
Card with icon
Add the section: Bootstrap 3 Cols
In Configure Section, click on Settings -> Container Settings:
- Container boxed and with gutters
- Extra large/Desktop/Tablet: 33%/33%/33% Mobile: 100%
- Then you add on Container wrapper class: "card-icon"
In structure/block/block-content pick a Basic Block and create a 'custom block' for each content column. Create two links trought 'link' from CKEditor toolbar:
- Icon link: Choose an icon from Font Awesome 6 and Humanitarian Icons | Font Awesome. Then add these two class: ' fa-solid fa-helmet-un'
- Add a heading
- Add information text
Clicking 'translate' tab the translation will be added.
In layout builder section, add each custom block in each column.
Did you know? Block Styles
Add section: Bootstrap 4 Cols
In Configure Section, click on Settings -> Container Settings:
- 2 options:
- Container boxed and no-gutters
- Full-width option: Container edge to edge and no-gutters
- Extra large/Desktop: 25%/25%/ 25%/25% Tablet: 50%/50% Mobile: 100%
- Then you add on Container wrapper class: "did-you-know"
In structure/block/block-content pick a Basic Block and create a 'custom block' for each content text. The left white line will be added automatically. Clicking 'translate' tab the translation will be added.
In layout builder section, select 'Add block' and find and select each custom blocks from the library for each column.
Add custom block here
Add custom block here
Add custom block here
Add custom block here
Cards Block
Add section: Add the number of columns you need
In Configure Section, click on Settings -> Container Settings:
- Container boxed and with gutters
In structure/block/block-content pick a Cards and create a 'custom block' for each content text. Field all mandatory fields.
In layout builder section, select 'Add block' and find and select each custom blocks from the library for each column.
Card Block Example 01
Card Block Example 02
Hero Banner
Add section: Bootstrap 1 Cols
In Configure Section, click on Settings -> Container Settings:
2 options:
- For Hero banner - Floating: Container edge to edge and no-gutters
- For Hero banner - Left: Container boxed and no-gutters
In structure/block/block-content pick a Hero Banner block and create a 'custom block':
- Complete all the fields: media and write the text in CKEditor. Add a button using link icon from CKEditor toolbar. You should use the classes "btn btn-secondary" and for the icon: 'fa-solid fa-circle-play'.
- 2 options:
- For Hero banner - Floating:
- Body position: floating, and Absolute Black 75%. Parallax effect is provided checking the check-box at the end
- Image Tips:
- The image must be landscape. According to the UN Style guide 27:10 is the best ratio for this type of images, for example: 1344x498px.
- Take into account that the floating text will overlap the image on the left side on desktop, and almost completely on mobile. For this reason, try to use images that do not contain people, if they do, make sure that it is not annoying the fact that the text is over the image on small screens.
- The image will also be reduced in the mobile versions, its height will be adapted to the content and the overflow sides of the image will be hidden. For this reason, the part that will always be exposed will be the center of the image.
- For Hero banner - Left:
- Body position: floating, and choose a color.
- Image Tips:
- The image should be wider than it is long. According to the UN Style guide 19:9 is the best ratio for this type of images, for example: 888x500px.
In layout builder, select 'add block' and find and select and add the custom block from the library.
You can also select the already created Hero Banner from Spokesperson: in Add block, you search Hero Banner OSSG block
Useful links:
Style guide - Buttons and classes
Hero Banner - Floating with Parallax
Hero Banner - Left Absolute White
Hero Banner - Left Absolute Black 75%
Hero Banner - Left Information Blue
Hero Banner - Left Absolute Black
Hero Banner - Left Dark Blue
Section Image + Text
Add section: Bootstrap 1 Cols
In Configure Section, click on Settings -> Container Settings:
- Container edge to edge and no-gutters
2 sections are needed, one for each block (one image for the image on left and another for image on the right)
Add a cutom block' and choose Image + Text. Complete all every required fields, choose a bg-light-blue background and the image position on left or right side.
Image Tips:
- 3:2 is the best ratio for this type of images, for example: 896x616px.
- Take into account that the image will also be reduced in the mobile versions, its height will be adapted to the content and the overflow sides of the image will be hidden. For this reason, the part that will always be exposed will be the center of the image.
Image
Role of the Deputy Secretary-General
Role of the Deputy Secretary-General
The role of the Deputy Secretary-General is to help manage Secretariat operations and to ensure coherence of activities and programmes. The post of Deputy SecretaryGeneral was established by the General Assembly at the end of 1997 as part of the reform of the United Nations, and its purpose was to elevate the Organization’s profile and leadership in the economic and social spheres.
Appointment process
Appointment process
The Secretary-General appoints the Deputy Secretary-General following consultations with Member States and in accordance with Article 101 of the Charter of the United Nations. The term of office of the Deputy Secretary-General cannot exceed that of the Secretary-General.
Image
Spokesperson's office members block
Add section: Bootstrap 3 Cols
In Configure Section, click on Settings -> Container Settings:
- Container boxed and no-gutters
- Extra large/Desktop: 33%/33%/ 33% Tablet/Mobile: 100%
- Then you add on Container wrapper class: "spokesperson--person"
In structure/block/block-content pick a Basic Block and create a 'custom block' for each content column.
Then, follow these steps:
- Add the media image you need and change 'default' to 'quote' mode. The image will be displayed now as squared.
- Add the name of the member and the role as paragraph text, then click on 'B' option in the CKEditor toolbar to make it bolder.
- Add a link through the link option in the toolbar with no class.
Clicking 'translate' tab the translation will be added.
In layout builder section, select 'Add block' and find and select each custom block from the library for each column. Write a title and remove the check to display it.
Image
Florencia Soto Nino
Spokeperson for the Secretary-General
sotonino>at<un.org
Image
Florencia Soto Nino
Spokeperson for the Secretary-General
sotonino>at<un.org
Image
Florencia Soto Nino
Spokeperson for the Secretary-General
sotonino>at<un.org
Quote
In structure/block/block-content pick a Basic Block and create a 'custom block' for the quote.
Click on 'Bootstrap quote' from CKEditor toolbar:
- Fill in the gaps, the image is optional.
Clicking in 'translate' tab the translation will be added.
In layout builder section, select 'Add block' and find and select the custom block from the library. Write a title and remove the check if you don't want to display it.
Simple quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ac felis massa. Quisque facilisis maximus felis nec ultrices.
Quote with picture
Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac felis massa. Quisque facilisis maximus felis nec ultrices.
Quote Banner
Add section: Bootstrap 1 Cols
In Configure Section, click on Settings -> Container Settings:
- Container edge to edge and no-gutters
- Add in Settings > Columns Settigns > Col 1 Classes= "px-0" to get full witdh.
In structure/block/block-content pick Quote Banner block and create a 'custom block':
- Complete all the fields:
- Write the quote text in CKEditor.
- Click on the bold option in the CKEditor toolbar to get the highlight effect.
- Fill the caption field.
In layout builder section, select 'Add block' and find and select the custom block from the library. Write a title and remove the check if you don't want to display it.
Slider block
Add section: Bootstrap 1 Cols
In Configure Section, click on Settings -> Container Settings:
- Container edge to edge and no-gutters
Options:
- Choose one of the sliders we have already been created:
- In layout section, 'Add block'. Then, find and select one of those:
- To Add a new slide:
- Content > Add Content and choose 'Slider'.
- Complete all the general fields and choose a media image.
- Create a new one:
- Add a view: /structure/views/add
- View settings: Show content of type: Slider sorted by Newest first
- Block settings: Check create a block and in block title: Name your carousel. In Block display settings: Display format: Swiper formatter of teasers.
- Items per block, let this field empty
- Save and edit.
- Add a view: /structure/views/add
- In layout section, 'Add block' and look for the view that you have just created and named in the block settings.
If you want to add some filter criteria to show just some elements in the slider you need to go to edit the view > Filter Criteria > Add. Then choose the filter that suits your needs.
Write a title and remove the check if you don't want to display it.
Slider
OSSG Slider
3 Content Section - Vision Block
Add section: Bootstrap 1 Cols
In Configure Section, click on Settings -> Container Settings:
- Container and no-gutters
In structure/block/block-content pick a 3 content section and create a 'custom block':
- Complete all the fields for each 3 content sections: Title, text and link.
Clicking 'translate' tab the translation will be added.
In layout builder section, select 'add block' and find and select the custom block from the library. Write a title and remove the check if you don't want to display it.
Vision
First
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula porttitor egestas. Suspendisse potenti. Quisque ultrices tortor vel ipsum scelerisque pharetra. Donec non velit ante.
Second
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula porttitor egestas. Suspendisse potenti. Quisque ultrices tortor vel ipsum scelerisque pharetra. Donec non velit ante.
Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula porttitor egestas. Suspendisse potenti. Quisque ultrices tortor vel ipsum scelerisque pharetra. Donec non velit ante.
Former General Secretaries (Cards)
Add section: Bootstrap 1 Cols
In Configure Section you can do in many ways, click on Settings -> Container Settings:
- Boxed and with gutters
- Full and no-gutters
Add block: Embed View Block > Embed View:EntityQueues
Click on "Display" select and choose Home - FSG (block_home_fsg_queue)
To apply the styles you have to go to: Settings -> Manage attributes -> Block title attributes and add the following class:
home--former-secretaries
If you want the title with this styles you have to go to: Settings -> Manage attributes -> Block title attributes and add the following classes:
mx-0 blue-line--center mb-10 mw-100
The spacing is added into: Settings -> Manage attributes -> Block attributes and add the following class:
py-12
Former Secretaries-General
Tabs: horizontal and vertical
123
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus commodo mollis lorem, rutrum cursus augue finibus eget. Integer malesuada ante eu sagittis posuere. Etiam pulvinar ligula sed mauris egestas dignissim. Aenean vestibulum justo mi, tempor aliquet orci imperdiet eu. Donec sodales enim lorem, id vehicula enim mattis sit amet. Proin pharetra aliquam diam sed molestie. Pellentesque pellentesque lorem vitae sem iaculis tempus. Duis vel nunc massa. Praesent vitae ultrices eros. Curabitur eu odio cursus enim maximus molestie. Sed sit amet interdum nulla. Suspendisse ac imperdiet nibh, ac fermentum felis.
Aliquam gravida sapien lacus, quis commodo lorem hendrerit id. Nulla elementum molestie leo, et faucibus purus laoreet at. Nulla pharetra hendrerit bibendum. Sed mauris neque, porta euismod ante non, scelerisque blandit velit. Donec sit amet eros et ipsum accumsan lobortis sed vel urna. Ut et nibh elit. Ut non facilisis dui. Morbi scelerisque leo ac rutrum ornare.
Etiam suscipit ut augue sit amet interdum. Pellentesque congue augue eu maximus sodales. Donec sed nunc vitae quam ullamcorper finibus in eget ligula. Nulla vitae ipsum non justo vulputate consequat eget at nisi. Ut bibendum ac mauris in tempus. Etiam non orci vel urna viverra lacinia. Nulla blandit ullamcorper blandit. Mauris ac tristique velit. Nullam in tortor vel lacus egestas fermentum ac vel lorem. Curabitur ut ligula eget elit venenatis consequat eu ac risus. Praesent fringilla venenatis odio, dictum sagittis libero luctus nec. Ut semper ultrices elementum. Duis viverra nulla sed ex placerat, quis euismod lorem lacinia. Vivamus ut massa elementum lorem pharetra euismod quis et lacus.
In sapien tellus, condimentum ac malesuada nec, pulvinar quis sapien. Cras eu purus ac quam pharetra cursus. Maecenas eu efficitur odio, dapibus finibus odio. In malesuada nisi eget elit dapibus bibendum sit amet sed ipsum. Morbi tristique ipsum at ullamcorper eleifend. Etiam id velit orci. Praesent cursus, ante convallis mattis interdum, risus leo venenatis nunc, quis scelerisque augue sem a turpis. Vivamus facilisis nunc leo, non dignissim magna fringilla ac. In quis feugiat erat. Mauris condimentum dignissim purus ac iaculis.
Mauris aliquam efficitur nunc eget porttitor. Curabitur luctus diam ligula, a lacinia dui mattis quis. Nunc posuere dignissim placerat. Pellentesque pretium est vel euismod imperdiet. Suspendisse tristique aliquam efficitur. Vivamus consequat eros vel justo porta, eu semper turpis placerat. Integer in fringilla sapien. Vivamus odio sem, dictum eu metus ut, laoreet euismod magna. Nunc sodales sapien sit amet dolor egestas egestas. Duis et mi lobortis, vehicula magna vitae, ultricies ante. Quisque eget nulla quis metus facilisis ullamcorper vitae nec ante.
Campaigns
UN Women’s website for the 2021 Observance
16 Days of Activism Against Gender Violence Campaign
UNITE to End Violence against Women
The Spotlight Initiative to Eliminate Violence against Women and Girls
Global Issues - Gender Equality
Goal 5 of the SDGs: Achieve Gender Equality and Empower All Women and Girls
Nam est nulla, ultricies consectetur sapien et, convallis semper libero. Phasellus tempus tellus nec leo consectetur, sed aliquam nibh efficitur. Duis id pulvinar dui, quis egestas turpis. Suspendisse dignissim tincidunt enim id bibendum. Vivamus pharetra, ligula nec vestibulum posuere, nunc ante posuere massa, in finibus metus odio in justo. Aenean bibendum leo dui, vitae eleifend arcu varius et. Fusce orci tellus, ornare in lorem vel, maximus finibus eros. Fusce in dapibus neque, quis imperdiet magna. Curabitur sed elit orci. In ut velit leo.
Vivamus pellentesque ex porttitor, luctus dui vel, facilisis mi. Mauris ac congue odio, eu maximus quam. Suspendisse vitae justo tincidunt, convallis tortor sit amet, consequat augue. Phasellus dolor sapien, auctor et posuere ut, posuere quis dolor. Morbi dictum venenatis magna ac bibendum. Suspendisse a odio non justo efficitur volutpat. Fusce a est sit amet orci ornare egestas. Cras id varius mauris. Fusce ut vulputate enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus tempus nisl sem, id commodo nisl tincidunt quis. Curabitur rutrum mi eget condimentum congue. Curabitur a orci sit amet velit maximus mollis sit amet ut nulla.
Curabitur finibus, nibh vitae ornare tempor, tortor lectus vehicula metus, et imperdiet sem urna non dui. Morbi facilisis tincidunt velit nec fringilla. Duis non mi vitae enim euismod sodales. Ut dictum libero non justo hendrerit auctor. Phasellus sit amet dolor enim. Nam ullamcorper pharetra placerat. Nunc quam ligula, hendrerit laoreet mauris nec, eleifend aliquet nulla. Nullam ut turpis vel magna suscipit porta at nec lacus. Morbi enim ipsum, euismod quis augue sed, gravida semper urna. Quisque tincidunt, est vitae hendrerit facilisis, nulla eros dapibus libero, quis scelerisque dolor metus ac elit. Mauris ex sapien, dignissim vitae laoreet sit amet, finibus eget lacus.