Component Gallery - Kitchen Sink

Banner - Wide

A flexible page has an optional banner component. The banner can have either have a compact or wide style applied to it. The banner can display a video or a background image. A CTA is optional and can either be a button or a link, and have a primary or secondary style applied to it.

Access the data

Image: This is a caption

Style Guide

Typography

Heading 1 - Title variant

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Subtitle

Pretitle / Eyebrow

Nav Labels

Paragraph

Hyperlinks

Caption

Colors

White

Sky

Leaf 100

Flaxen

Light Gray 100

Light Gray 200

Section Gray 100 - BG

Section Gray 200 - BG

Twilight

Denim

Black

richgreen

Harvest

emeraldgreen

Earth

Barn

Leaf 200

Leaf 300 - Nutrien Leaf 1AAA

Leaf 400 - Nutrien Leaf 2AAA

Gray 100

Gray 200

Mine Shaft

Gradients

Leaf

Gray Light

Gray

Buttons

Light Section.

Primary Button Secondary Button Link Secondary Link

Dark Section (knockout).

Primary Button Secondary Button Link Secondary Link

This is an eyebrow

Banner - Compact

This is the same banner component that is optionally available when creating new flexible pages. In this case, we are displaying it within the page builder using the Compact style.

This is an eyebrow

Buckets - Transparent Card!

This is a subtitle. Component has optional background colours, and optional CTA

Mar 25, 2024

Card Title

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled CTA link

Mar 07, 2024

Nutrien releases 2023 Global Sustainability Report

Nutrien files 2023 annual disclosures

Nutrien announces TSX approval for its renewed share repurchase program

Buckets - Transparent Card - Image

Stories

May 1, 2024

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs!

Secondary Link styled CTA link

Stories

Let’s Talk Science uses career profiles to connect STEM students to careers in agriculture

Read the story

Stories

Let’s Talk Science uses career profiles to connect STEM students to careers in agriculture

Read the story

Browse all stories

Buckets - Transparent 2 Col

Stories

May 1, 2024

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled CTA link

Stories

Let’s Talk Science uses career profiles to connect STEM students to careers in agriculture

Read the story

Browse all stories

Buckets - Transparent - 1 Image ver

Stories

May 1, 2024

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled CTA link

Browse all stories

Buckets - Background Card - 2 Col

This is a title

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled internal CTA

This is a title

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled internal CTA

This is a title

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled internal CTA

This is a title

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled internal CTA

Buckets - BG Card - icon - 3 col

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled external CTA

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled external CTA

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled external CTA

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled external CTA

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled external CTA

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled external CTA

This is an eyebrow

Colour Card (Left)

This is a subtitle

Stories

This is a title

The Colour Card has optional section background colours, and the background colour of the card is selectable. The copy can be toggled to place it to the left or right side of the image. The tail design can be toggled on/off. The tag is optional.

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‍‍‌‍‌‌‍‍‌‌‍‌‍‌‍‍‌‍‌‍‌‍‌‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‌‌‍‌‌‌‍‌‌

Secondary Button CTA

This is an eyebrow

Colour Card (Right)

This is a subtitle

Stories

This is a title

The Colour Card has optional section background colours, and the background colour of the card is selectable. The copy can be toggled to place it to the left or right side of the image. The tail design can be toggled on/off. The tag is optional.

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‍‍‌‍‌‌‍‍‌‌‍‌‍‌‍‍‌‍‌‍‌‍‌‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‌‌‍‌‌‌‍‌‌

Secondary Button CTA

This is an eyebrow

Fifty Fifty

This is a subtitle

Resources

This is an eyebrow

This is a title

Fifty Fifty Card has optional section background colours. If multiple Fifties are stacked on top of each other, the first item copy can be toggled to place it to the left or right side of the image, and the remaining will follow. The tag is optional.

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‌‍‍‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‌‌‍‌‌‌

Careers Secondary Button CTA

Resources

This is an eyebrow

This is a title

Fifty Fifty Card has optional section background colours. If multiple Fifties are stacked on top of each other, the first item copy can be toggled to place it to the left or right side of the image, and the remaining will follow. The tag is optional. ‌‍‍‌‌‍‍‌‌‌‍‌‌‌‍‍‌‌‍ ‌‍‌‌‌‍‌‌‍‍‌‌‌‍ ‌‍‌‌‍ ‌‍‌‌‍‌‌ ‌‌‌‍‌‍‌‌‌‌‍‌‌‌‍‍‌‌‌‍‌‌‌‌‍‍‌‌‍ ‌‍‍‍‌‍‍‌‌‍‌ ‌‌‍‌‍‌‍‌‌‌‍‌‍‌‌‍‌‌‌‍‍‍‌‍‌‌‍‌‌‌‍‌‌‌‍‌‌‍‌‌‍‌‌‌‌‍‍‍‌‌‍‍‍‌‍‌‌‍‌‍‌‍‌‌‌‍‌‌‌‍‌‌‌‍‌‌ ‌‌‍‌‍‌‍‌‍‌‌‌‍‌‍‍‌‌‍‍‌‍‌‍‌‌‌‌‌‍‌‌‍‌‌‍‌‌‍‌‌‍‌‌‌‌‍‍ ‌‌‌‍‌‌‌‍‌‌‌‍‍‌‌‍ ‌‍‍‌‍‌‌‌‌‌‍‌‌ ‌‍‍‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‌‍‌‌‍‍‌‍‌‌‌‍‌‌‍‌‍‌‍‌‌‍‌‍‌‌‍‌‌‌‍‌‌‍‌‌‌‌‍‌‍‌‌‍‌‍‌‍‌‌‌‌‍‌‌‍‌‌‍‌‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‍‍‌‍ ‌‍‌‌‍‌‌‌‍ ‌‍‍‌‌‌‍‌‌‌‍‍‌‌‍‌‌‌‌‌‍‌‌ ‌‍‍‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‍‌‍‌‌‍‌‍‌‍‌‌‍‌‌‌‌‍‌‍‌‌‍‌‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‍‌‍‍‌‍‍‌‌‍‌‍‌‌‍‌‍‌‌‌‍‍‍‌‌‌‌‌‍‌‌ ‌‍‍‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‍‍‌‍‌‌‍‍‌‌‌‍‌‍‌‌‍‍‌‌‍‌‍‌‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‌‌‍‌‌‌‍‌‌ ‌‍‍‌‍‌‌‌‍‌‌‌‌‌‌‌‍‌‍ ‌‍‌‌‍‌‌‍‌‌‌‌‌‌‌‍‌‌‍‍‌‌‍ ‍‌‍‌‍‍‌‌‍‌ ‌‌‍‌‍‌‍‌‌‌‍‌‍‌‌‍‌‌‌‍‍‍‌‍‌‌‍‌‌‌‍‌‌‌‍‌‌‍‌‌‍‌‌‌‌‍‍‍‌‌‍‍‍‌‍‌‌‍‌‍‌‍‌‌‌‍‌‍‌‌‌‍‌‌‌‍‌‌ ‌‌‍‌‍‌‍‌‍‌‌‌‍‌‍‍‌‌‍‍‌‍‌‍‌‌‌‌‌‍‌‌‍‌‌‍‌‌‍‌‍‌‌‍‌‌‌‌‍‍ ‌‌‌‍‌‌‌‍‌‌‌‍‍‌‌‍ ‌‍‍‌‍‌‌‌‌‌‍‌‌ ‌‍‍‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‌‍‌‌‍‍‌‍‌‌‌‍‌‌‍‌‍‌‍‌‌‍‌‍‌‌‍‌‌‌‍‌‌‍‌‌‌‌‍‌‍‌‌‍‌‍‌‍‌‌‌‌‍‌‌‍‌‌‍‌‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‍‍‌‍ ‌‍‌‌‍‌‌‌‍ ‌‍‍‌‌‌‍‌‌‌‍‍‌‌‍‌‌‌‌‌‍‌‌ ‌‍‍‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‍‌‍‌‌‍‌‍‌‍‌‌‍‌‌‌‌‍‌‍‌‌‍‌‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‍‌‍‍‌‍‍‌‌‍‌‍‌‌‍‌‍‌‌‌‍‍‍‌‌‌‌‌‍‌‌ ‌‍‍‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‍‍‌‍‌‌‍‍‌‌‌‍‌‍‌‌‍‍‌‌‍‌‍‌‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‌‌‍‌‌‌‍‌‌‍‌‍‌‍‍‌‌‌‌‌‍‌‍‌‌‍‌‍‌‌ ‌‍‍‌ ‌

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‌‍‍‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‌‌‍‌‌‌

Primary Button CTA Secondary Button CTA

This is an eyebrow

Numbers

This is a subtitle

$23m

Number items can be added or removed.

26,000

Number of grid items can optionally be limited to 3 per row

14

countries with operations and investments

2000+

retail locations worldwide

This is an eyebrow

Overlap

This is a subtitle

Stories

this is the lower eyebrow

This is a lower title

Overlap has optional section background colours. The copy area has an optional tag, eyebrow and title. The copy can be toggled to place it to the left or right side of the image.

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‍‍‌‍‌‌‍‍‌‌‍‌‍‌‍‍‌‍‌‍‌‍‌‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‌‌‍‌‌‌‍‌‌

Careers

This is an eyebrow

Overlap

This is a subtitle

Stories

this is the lower eyebrow

This is a lower title

Overlap has optional section background colours. The copy area has an optional tag, eyebrow and title. The copy can be toggled to place it to the left or right side of the image.

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‍‍‌‍‌‌‍‍‌‌‍‌‍‌‍‍‌‍‌‍‌‍‌‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‌‌‍‌‌‌‍‌‌

This is an eyebrow

Side By Side

This is a subtitle. Component has optional background colours.

Events

This is an eyebrow

Cards Title

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

This is a Primary Button styled CTA This is a Secondary Button styled CTA with external link

Stories

This is an eyebrow

Cards Title

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

This a Primary Link styled CTA This is a Secondary Link styled CTA with external link

This is an eyebrow

Tabs

This is a subtitle

This content area is managed by the full version of the Portable Text editor. It provides ‍‌the ability to add H1-H4s, style text with bolds, italics, and inline links. It also allows you to insert tables, images, YouTube embeds, and accordions. ‍‌‌‌‌‍‌‌‍‍‌‍‌‍‌‍‌‍‌‌‍‍‌‍‌‍‌‍‌‌‍‍‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‌‌‍‌‌‌

Primary Button CTA Secondary Button CTA

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, mi id consectetur vulputate, nisi quam condimentum est, id convallis ligula dui aliquam purus. Donec sit amet dolor at metus gravida auctor eget quis risus. Maecenas porta velit eu eros porttitor faucibus. Ut vulputate, enim id consectetur viverra, orci orci fringilla leo, nec convallis dolor dui eu ipsum. Aenean finibus, magna in venenatis vulputate, quam quam eleifend ex, quis maximus ligula felis quis nibh. Vivamus lectus orci, vulputate eget risus cursus, efficitur aliquam nunc. Nunc eget rhoncus felis.

This is an eyebrow

Slider

This is a subtitle

Slide title

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled internal CTA

Slide title

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled internal CTA

Slide title

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled internal CTA

Slide title

This content area is managed by a streamlined version of the Portable Text editor with minimal styling and CTAs.

Secondary Link styled internal CTA

Optional CTA

This is an eyebrow

Stock Charts

This is the subtitle

Stock charts

Stock quote (NTR)

Historical stock quote (NTR)

This is an eyebrow

Tables

This is a subtitle

This is the table title

Date declared	Record date	Payable date	Amount
March 22, 2024	March 22, 2024	April 11, 2024	$0.54
March 22, 2024	March 22, 2024	April 11, 2024	$0.54
March 22, 2024	March 22, 2024	April 11, 2024	$0.54

Date declared:

March 22, 2024

Record date:

March 22, 2024

Payable date:

April 11, 2024

Amount:

$0.54

Date declared:

March 22, 2024

Record date:

March 22, 2024

Payable date:

April 11, 2024

Amount:

$0.54

Date declared:

March 22, 2024

Record date:

March 22, 2024

Payable date:

April 11, 2024

Amount:

$0.54

Stay in touch

Investor news alerts direct to your inbox

Register to automatically receive Nutrien news updates by email.

By providing your email address, you consent to Nutrien sending you the requested Investor Email Alert updates. Unsubscribe at any time by clicking the “unsubscribe” button at the bottom of our emails or by clicking here.

This is an eyebrow

Content (Portable Text)

This is a subtitle

The Content component has optional section background colours. Content and components within this container are left aligned by default, but can be center aligned. This component displays it's content at full width by default, but it can also display it's content and components at a limited width.

This content area is managed by the full version of the Portable Text editor. It provides ‍‌the ability to add H1-H4s, style text with bolds, italics, and inline links. It also allows you to insert tables, images, YouTube embeds, accordions, buckets. CTAs, and limited width content. Test

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.

Optional CTA

YouTube

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.

Optional Button CTA

Accordion

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.

Optional CTA Link

Table

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.

Month	Year	Arbitrary value
January	2024	$12,345.67
March	2024	$987.65
May	2024	$2468
July	2024	$963
August	2024	$711.24
October	2024	$1,107.24
December	2024	$12,345.67

Month:

January

Year:

2024

Arbitrary value:

$12,345.67

Month:

March

Year:

2024

Arbitrary value:

$987.65

Month:

May

Year:

2024

Arbitrary value:

$2468

Month:

July

Year:

2024

Arbitrary value:

$963

Month:

August

Year:

2024

Arbitrary value:

$711.24

Month:

October

Year:

2024

Arbitrary value:

$1,107.24

View component testing page

Buckets

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.

Dolore sit amet

Press Releases

Lorem ipsum dolor

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Stories

Duis aute irure dolor

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

Events

Ut enim ad minim

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Resources

Excepteur sint occaecat

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Limited width content block - Medium

Content at 50% width

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.

Limited width content block - Large

Content at 66.6% width

Use these larger content blocks for images and video.

YouTube video embed

To add a video to a page, create a Large Limited Width container, click the button in the toolbar labeled YouTube Embed, and paste the URL to the video in the field provided.

Stock updates

Stock updates

Stock updates

Stock updates

Stock updates

Stock updates

Search Nutrien.com

Stock updates

Did you know?

Banner - Wide

Style Guide

Typography

Heading 1 - Title variant

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Colors

Gradients

Buttons

Light Section.

Dark Section (knockout).

Banner - Compact

Buckets - Transparent Card!

This is a subtitle. Component has optional background colours, and optional CTA

Card Title

Nutrien releases 2023 Global Sustainability Report

Nutrien files 2023 annual disclosures

Nutrien announces TSX approval for its renewed share repurchase program

Buckets - Transparent Card - Image

Buckets - Transparent 2 Col

Buckets - Transparent - 1 Image ver

Buckets - Background Card - 2 Col

This is a title

This is a title

This is a title

This is a title

Buckets - BG Card - icon - 3 col

Colour Card (Left)

This is a subtitle

This is a title

Colour Card (Right)

This is a subtitle

This is a title

Fifty Fifty

This is a subtitle

This is a title

This is a title

Numbers

This is a subtitle

$23m$0m

26,0000

140

2000+0+

Overlap

This is a subtitle

This is a lower title

Overlap

This is a subtitle

This is a lower title

Side By Side

This is a subtitle. Component has optional background colours.

Cards Title

Cards Title

Tabs

This is a subtitle

Slider

This is a subtitle

Slide title

Slide title

Slide title

Slide title

Stock Charts

This is the subtitle

Stock charts

Stock quote (NTR)

Historical stock quote (NTR)

Tables

$23m

26,000

14

2000+