Homepage widgets - Kidney Foundation
Skip to main content

Homepage widgets

Homepage Banner

The layout and background colour are fixed.

Image dimensions: 1920px by 1280px.

The Rich Text and Button widgets are part of the same content area. It is required to have at least 1 widget in the content area.

Buttons can have the following colours:

Magenta Dark blue Cyan Light grey

Light grey should not be used since it matches the background colour.

Stackable Blocks

Similar to the homepage banner, but more flexible. Mainly used on internal pages.

The image can be either be positioned on the left or right.

Image dimensions: 1920px by 1280px.

The other half can have the following background colours: dark blue, magenta, cyan, or light grey.

The colour of the button is pre-determined based on the background colour.

Image Promo Block

Image dimensions: 1920px by 1280px.

Buttons can be the following colours: dark blue, magenta, cyan, or light grey.

Woman with a concerned expression standing in a dark corridor

This is a title (required)

This is Rich Text (optional).

This is a button (optional)

Large Horizontal Card With Images

The bare minimum requirements for this widget are the background colour and title (making it a basic <h2> with a background colour). The following items are optional:

  • Rich Text

  • Ability to link to a page or file (an arrow is added to the card when linked)

  • Images (up to 3)

Image dimensions: 472px by 552px.

The background colour can be dark blue, magenta, cyan, or light grey.

Note: the section background will always be white for this widget.

This is a title (required)

This is Rich Text (optional).
  • A woman holding some carrots by a cart, shopping for produce in a grocery store
  • Older couple laughing while watching something on a laptop
  • Back view of a young woman looking to her left.

Split Column Stackable Blocks

A minimum of 2 blocks are required. If there is an odd number of blocks, the last half will be empty.

Below you will see combinations of fields and background colours.

Button colours are pre-determined based on the background colour.

Testimonial Carousel

A minimum of 1 testimonial is required.

When there are 2 or more testimonials, navigation arrows will appear on either side.

  • This is a testimonial (required).

    This is the author (optional)

  • This is a testimonial (required).

Section Background

Section Backgrounds are containers that that can house multiple widgets (i.e. everything after this section).

The background colours are: white, light grey, dark grey (current colour behind this text), and graphic (see example below).

Lorem ipsum dolor sit amet

Proin elementum tincidunt pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt, lorem non pulvinar tristique, turpis magna posuere leo, convallis lobortis neque est quis risus. Donec auctor tristique metus in convallis.

Aenean scelerisque lectus a neque luctus semper.

Lorem ipsum
Woman with a concerned expression standing in a dark corridor

Multi Column Content

This widget can have between 2 and 4 columns.

Each column can house the following widgets:

  • Rich Text

  • Row of Buttons

  • Accordion Widget

  • Raw HTML

  • Image

  • Video

  • Social Media Links

Lorem ipsum dolor sit amet

Proin elementum tincidunt pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt, lorem non pulvinar tristique, turpis magna posuere leo, convallis lobortis neque est quis risus. Donec auctor tristique metus in convallis.

Lorem ipsum
Woman with a concerned expression standing in a dark corridor


Praesent lectus eros, porta vitae velit sed, convallis posuere lorem.

  • Sed vulputate dui volutpat pulvinar iaculis.

    Suspendisse mollis massa a urna bibendum, id condimentum orci ultricies. Duis a tincidunt mi. Sed vel nibh id ipsum convallis vestibulum. Quisque egestas condimentum pretium.

  • Praesent lectus eros, porta vitae velit sed, convallis posuere lorem.

    Aenean lacinia et enim ut dictum. Etiam tempus, nulla scelerisque cursus ornare, orci leo porta justo, quis ultrices eros tellus eget ex. Curabitur sit amet augue iaculis, fermentum turpis eget, gravida enim. Nunc euismod convallis tempus. Aenean nibh libero, tempus dictum nisi sed, luctus varius massa.

  • Etiam molestie erat lacus, a eleifend magna aliquam eu.

    Donec scelerisque id velit eget vulputate. Vivamus velit sem, sodales et risus vulputate, convallis venenatis purus. Duis ante sapien, imperdiet eget augue ut, placerat lobortis libero. Vivamus suscipit, velit in viverra faucibus, purus nibh ullamcorper justo, at commodo justo mauris vitae ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque consectetur elit ipsum, ac viverra sem pulvinar non.

Raw HTML

It is possible to create a custom widget with HTML code.

These should be used sparingly since different browsers, screen sizes, and Apostrophe releases may override the styling.

PRIORITIZE PREVENTION, EARLY DETECTION, AND TIMELY INTERVENTION:

Move beyond treating kidney failure to actively mitigating risk factors like diabetes and hypertension, and implementing systematic screening so Canadians are diagnosed early when serious kidney damage can still be delayed or prevented.

ENSURE EQUITABLE ACCESS TO KIDNEY CARE FOR ALL CANADIANS:

Address systemic barriers by expanding culturally competent, multidisciplinary care, including increasing access to new treatments and medicines, especially in the early stages of the disease.

ADVANCE RESEARCH AND DATA FOR BETTER KIDNEY HEALTH:

Invest in innovative research and leverage existing data infrastructure to strengthen evidence-based decision-making, and ensure that new discoveries are rapidly translated into practice.

Rich Text

Aside from the typical text formatting options, we can add horizontal rulers and tables, and float images within text.

Heading 2

Heading 3

Heading 4

Heading 5

Paragraph

Large Paragraph

Small Paragraph

Extra Small Paragraph

Bold

Italics

Link

Superscript

Subscript

  • Unordered list item #1

  • Unordered list item #2

  • Unordered list item #3

  1. Ordered list item #1

  2. Ordered list item #2

  3. Ordered list item #3

Table Header 1

Table Header 2

Table Header 3

Lorem

Ipsum

Lorem

Ipsum

Lorem

Ipsum

Dr. Amanda Cunningham

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel sollicitudin ipsum, at auctor leo. Sed dui massa, luctus vel pretium id, sollicitudin eu enim. Vivamus diam nibh, tincidunt quis lorem ut, varius maximus leo. Sed non auctor ipsum. Proin elementum tincidunt pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt, lorem non pulvinar tristique, turpis magna posuere leo, convallis lobortis neque est quis risus. Donec auctor tristique metus in convallis.

Aenean scelerisque lectus a neque luctus semper. Vestibulum hendrerit neque metus, a gravida enim sagittis sed. Sed quis dapibus mauris. Phasellus interdum ac eros nec convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque sollicitudin tortor ipsum, at tempus massa varius et. Etiam rutrum mi eget orci consectetur blandit. Maecenas sagittis magna sit amet nulla eleifend, vel vestibulum magna commodo. Maecenas ligula massa, ultricies et mi eu, vestibulum ullamcorper purus. Integer porttitor ac libero quis accumsan. Suspendisse sem lectus, scelerisque sed bibendum vitae, ultricies vel tortor. Aenean eget diam magna. Praesent vestibulum ipsum nisl, ac posuere quam bibendum vitae. Donec eget ullamcorper odio, eu tincidunt orci. Aenean ultricies velit tortor, id blandit enim placerat ac. Pellentesque leo mi, semper a velit efficitur, hendrerit efficitur mi.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean suscipit consequat sem fringilla convallis. Morbi iaculis, ipsum a pharetra vestibulum, mauris nisl molestie enim, sed cursus velit libero vitae diam. In pretium, risus vel suscipit pulvinar, tortor ante suscipit massa, vel pulvinar ipsum lorem vitae mi. Morbi porttitor, urna at sodales sollicitudin, velit tortor faucibus enim, id gravida purus dolor sed massa. Curabitur in blandit quam, ac maximus mauris. Donec ac metus in sapien consequat convallis eget eget erat.

Sed bibendum, nunc a sagittis volutpat, metus mauris sollicitudin sapien, sit amet eleifend lacus urna ornare metus. Maecenas ac convallis ante, vel vulputate purus. Curabitur facilisis ex eu neque condimentum, quis malesuada ex hendrerit. In leo justo, egestas et sollicitudin sed, gravida at turpis. Aenean ac mi ligula. Integer eget nisl sit amet eros condimentum tincidunt. Maecenas mattis imperdiet nisl, id vestibulum justo iaculis a. Nulla ut blandit tellus. Vivamus vel posuere justo. Cras commodo nisi eget vehicula laoreet. In vitae scelerisque neque. In pretium dolor et mauris finibus, ut imperdiet nunc eleifend. Morbi ut ante augue. Suspendisse fringilla mauris magna, eget egestas sem tincidunt in.

Row of Buttons

A minimum of 1 button is required. In most cases, only 1 is needed.

When 2 or more are enabled, they stack on top of each other (more like a column rather than "Row").

See colours below.

Magenta Dark blue Cyan Light grey

2 Column Large Cards

A minimum of 1 card is required.

Images are optional.

Image dimensions: 720px by 388px.

Button colours are pre-determined based on the background colour.

Below you will see all combinations of fields and background colours.

4 Column Medium Cards

A minimum of 1 card is required.

Images and links are optional.

Image dimensions: 348px by 248px.

Below you will see combinations of fields and background colours.

4 Column Event Cards

Minimum of 1 and maximum of 4 cards per row.

Images can be hidden.

Image dimensions: 810px by 488px.

Background colour can be either dark blue, magenta, or light grey.

4 Column News Card Widget

A minimum of 1 card is required.

Accordion

A minimum of 1 accordion tab is required.

Accordions can contain the following widgets: Rich Text, Row of Buttons, and Multi Column Content.

Anchored Links Widget

These buttons allow you to jump to a specific Section Background on the page.

Buttons can be dark blue, magenta, cyan, or light grey.

Image

Any image from the Media Library can be embedded through this widget.

Minimum image width if intended to take up the full width of the Section Background container: 1920px.

Expands to the full width of the container.

Woman with a concerned expression standing in a dark corridor

Video

We can embed YouTube videos with this widget.

Expands to the full width of the container.

Large CTA Link

A simple large CTA button.

There are only two colour schemes.

This is link text (required)
This is link text (required)

Small Gallery Cards

A row of images.

A minimum of 1 image is required. Up to 4 per row.

Image dimensions: 360px by 260px.