Skip to main content

Button Links*

IMPORTANT: Before applying any of the following button link styles, make sure that the element you're applying the style to is ALREADY a link. See Working With Custom HTML Modules' Content Editors (WYSIWYG) to learn how to add a link inside your content editor.

Link with Arrow

White Button

Yellow Button

for center a button also has to have a button class assigned.

Center a Button (Yellow Button)

Center a Button (White Button)

Banner Sections

  • Headline Copy Banner
  • Header with Media on Right with eye brow
  • Headline only with Media on the right
  • header and eyebrow only with media
  • Header with Media on Right with eye brow
  • Headline only with Media on the right
  • Headline Copy Banner Alt
  • Headline Copy Banner Alt - no sub copy

Snippets

  • Eyebrow Text Header
  • Yellow Lined Header OR Eyebrow Text Header

Headline Copy Banner (Section 9)

Suggested Use: Introduction on a page when the design requires text under the first headline.

Available Code Snippets:

  • (Section 9) Eyebrow Text Header this has the small sub header
  • (Section 9) Yellow Lined Header this is the main style with the main headline and copy under

Available On:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Headline Copy Banner Alt (Section 9a)

Suggested Use: Has a rounded shape that's better for separating two sections further down the page. Usually used as a callout or headline with explanatory text in the middle of a page.

Available Code Snippets:

  • (Section 9) Eyebrow Text Header this has the small sub header
  • (Section 9) Yellow Lined Header this is the main style with the main headline and copy under

Available On:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Headline Copy Banner Alt - no sub copy (Section 9b)

Suggested Use: Usually used as a headline to separate distinct parts of a page.

Available Code Snippets:

  • (Section 9) Eyebrow Text Header this has the small sub header
  • (Section 9) Yellow Lined Header this is the main style with the main headline and copy under

Available On:

Lorem Ipsum

Headline and copy with Media on the right (Section 10)

Suggested Use: Introduction when the page design includes a hero photo or video, and a paragraph of copy.

Character Limit - This section's design is only compatible with brief introductions. There is a hard character limit of 330 characters (including spaces) to the text of this intro. 274 character looks better, with spacing at the bottom. Any longer than 330, and the text will go below the grey line. Using styles to increase the character size, or using more than one paragraph with white space, limits your character count even more.

If you need your intro to have more characters than that, use section 9 for your intro instead, and add a separate image below it by using the Add New section "Large Image - Centered (Section 12a)".

Available Code Snippets:

  • (Section 10) Eyebrow Text Header this has the small sub header
  • (Section 10) Yellow Lined Header this is the main style with the main headline and copy under

Available On:

Lorem Ipsum

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. Use this section for designs without eyebrow text. Delete the copy below this, in that case.

header and eyebrow only with media (Section 10a)

Suggested Use: Introduction when the page design includes a hero photo or video, and 'eyebrow' text.

Available Code Snippets:

  • (Section 10) Eyebrow Text Header this has the small sub header
  • (Section 10) Yellow Lined Header this is the main style with the main headline and copy under

Available On:

Lorem Ipsum

Lorem Ipsum

Header with Media on Right with eye brow (Section 10b)

Suggested Use: Introduction when the page design includes a hero photo or video, a paragraph of copy, and 'eyebrow' text.

Available Code Snippets:

  • (Section 10) Eyebrow Text Header this has the small sub header
  • (Section 10) Yellow Lined Header this is the main style with the main headline and copy under

Available On:

Eyebrow Text

Headline Under Eyebrow Text

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. Use this section for designs with eyebrow text.

Headline only with Media on the right (Section 10c)

Suggested Use: Introduction when the page design includes a hero photo or video, and only a headline, no paragraph of copy.

Available Code Snippets:

  • (Section 10) Eyebrow Text Header this has the small sub header
  • (Section 10) Yellow Lined Header this is the main style with the main headline and copy under

Available On:

Copy Example Header

In page nav

  • In page Nav with Copy
  • In page Nav - By Itself

Snippets

  • In Page Nav - links

these modules are in page links that links to other pages. These are not tabs by design.

In page Nav with Copy (section 11)

Suggested Use: This array of links brings the user to internal pages very similar to the page that they are currently on. It's used for translated versions of the current page, and for other pages that all cover the same topic. Some projects have called tightly related collections of pages like this "microsites".

Use Notes: This variation has introductory copy under the navigation. Use 11a if your design has no copy right under it.

Styling help for the green link appearance: Open the code view in the WYSIWYG and add the class "in-page-nav-link--always-active" to the anchor element in order to force it to always be dark green with an underline, the active state. Add this to the anchor tag that refers to the page that the user is currently on. See the code example below. It shows code for the link to the English page to look green, to be added to this section when it's on the English page itself.

<a class="in-page-nav-link in-page-nav-link--always-active" href="#"> English </a>

Available Code Snippets:

  • In Page Nav - links this is the default for the links in this section

Available On:

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

In page Nav - By Itself (section 11a)

Suggested Use: See use and styling instructions above, under section 11.

Notes: This version has no copy under the navigation.

Available Code Snippets:

  • In Page Nav - links this is the default for the links in this section

Available On:

Disclosure Blocks

  • Disclosure
  • Disclosure - Background
  • Disclosure - Background - big header

Snippets

  • Example Drop Downs

Disclosure (Section 8)

This section is radancy only because it requiere code view in the editor.

Suggested Use: These are used on FAQ pages.

Available Code Snippets:

  • Example Drop Downs Base drop downs QA
  • Example Drop Downs Base drop downs QA with a larger header in the heading

Available On:

Disclosure - Background (Section 8a)

This section is radancy only because it requiere code view in the editor.

Notes: This version of the FAQ has a round, bulging shape in the background.

Available Code Snippets:

  • Example Drop Downs Base drop downs QA
  • Example Drop Downs Base drop downs QA with a larger header in the heading

Available On:

Disclosure - Background - big header (Section 8b)

Suggested Use: This version of the FAQ has a round, bulging shape in the background, and a header with a larger font size.

Available Code Snippets:

  • Example Drop Downs Base drop downs QA
  • Example Drop Downs Base drop downs QA with a larger header in the heading

Available On:

Media - left/right

  • Content End w Arch - Img Left
  • Content End w Arch - Img Right
  • Content End - Img Left
  • Content End - Img Right
  • Content End - Img Left - fast facts
  • Content End - Img Right - fast facts

Snippets

  • Content end - Facts Copy
  • Content end - Normal Lists

notes

bullet lists and numbered list can be added via the wizizwig 

Content End w Arch - Img Left (section 1)

Notes: Either an image or a YouTube video can be placed into the media area here. Any text styles from code snippets and Style Management, including bullet points and buttons, are usable in the text section.

Available Code Snippets:

  • Content end - Facts Copy
  • Content end - Normal Lists

Available On:

H2 40px Lorem Ipsum

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Discover More

Content End w Arch - Img Right (section 1a)

Available Code Snippets:

  • Content end - Facts Copy
  • Content end - Normal Lists

Available On:

H2 40px Lorem Ipsum

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Discover More

Content End - Img Left (section 1b)

Notes: Unlike section 1 and 1a, 1b has no background image. This makes them stack more easily in page designs. Many page designs stack a collection of photos and text with sections 1b and 1c.

Available Code Snippets:

  • Content end - Facts Copy
  • Content end - Normal Lists

Available On:

H2 40px Lorem Ipsum

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Discover More

Content End - Img Right (section 1c)

Notes: See 1b.

Available Code Snippets:

  • Content end - Facts Copy
  • Content end - Normal Lists

Available On:

H2 40px Lorem Ipsum

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Discover More

Content End w Arch - Img Left - fast facts (section 1d)

Notes: 1d and 1e have the bulging shape in the background, making them ideal to use at the end of alternating rows of 1c and 1d sections. The bullet points can be replaced with normal text, and the buttons can be removed, if the design calls for it.

Available Code Snippets:

  • Content end - Facts Copy
  • Content end - Normal Lists

Available On:

H2 40px Lorem Ipsum

  • Lorem ipsum dolor sit amet consectetur adipiscing
  • Lorem ipsum dolor sit amet consectetur adipiscing
  • Lorem ipsum dolor sit amet consectetur adipiscing
  • Lorem ipsum dolor sit amet consectetur adipiscing
  • Lorem ipsum dolor sit amet consectetur adipiscing sit amet consectetur adipiscing

Discover More

Content End w Arch - Img Right - Fast Facts (section 1e)

Notes: See 1d.

Available Code Snippets:

  • Content end - Facts Copy
  • Content end - Normal Lists

Available On:

H2 40px Lorem Ipsum

  • Lorem ipsum dolor sit amet consectetur adipiscing
  • Lorem ipsum dolor sit amet consectetur adipiscing
  • Lorem ipsum dolor sit amet consectetur adipiscing
  • Lorem ipsum dolor sit amet consectetur adipiscing
  • Lorem ipsum dolor sit amet consectetur adipiscing sit amet consectetur adipiscing

Discover More

Map Modules

  • Map Module
  • Map Module - reversed

notes

the map module can only have one per page or the map won't show

Map Block (Section 6)

Notes: This can only occur once per page. If you try to load a second map on a page, only the first will show.

Available On:

Our Location

Explore the Area

  • UPS Flight Training Center

    802 Grade Lane, Louisville, Kentucky, 40213

  • UPS Worldport

    911 Grade Lane, Louisville, Kentucky, 40213

  • UPS Supply Chain Solutions

    2230 Outer Loop, Louisville, Kentucky, 40219

  • UPS Air Group Building

    1400 N. Hurstbourne Parkway, Louisville, Kentucky, 40223

  • UPS Employment Center

    8203 National Turnpike, Louisville, Kentucky, 40214

Map Block - reversed (Section 6a)

Notes: This can only occur once per page. If you try to load a second map on a page, only the first will show.

Available On:

Our Location

Explore the Area

  • UPS Flight Training Center

    802 Grade Lane, Louisville, Kentucky, 40213

  • UPS Worldport

    911 Grade Lane, Louisville, Kentucky, 40213

  • UPS Supply Chain Solutions

    2230 Outer Loop, Louisville, Kentucky, 40219

  • UPS Air Group Building

    1400 N. Hurstbourne Parkway, Louisville, Kentucky, 40223

  • UPS Employment Center

    8203 National Turnpike, Louisville, Kentucky, 40214

Copy Sections

  • Single Column - Copy
  • Single Column - Copy - With Button
  • Single Column - Copy - Center

Snippets

  • Intro Copy With Button
  • Intro Copy With yellow Button
  • This is only for single column center: Single Column - Copy - center Base

Single Column - Copy (Section 7)

Available Code Snippets:

  • Section 7 - Base Return to base copy.

Available On:

Lorem Ipsum

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. Phasellus pharetra urna sit amet tellus elementum aliquet in et quam. In condimentum dui. This is body copy using Roboto at 20px, with a 28px line-height in the color of Black.

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. Phasellus pharetra urna sit amet tellus elementum aliquet in et quam. In condimentum dui. This is body copy using Roboto at 20px, with a 28px line-height in the color of Black.

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black.

Lorem Ipsum

Phasellus Pharetra Urna Sit Amet,
Lorem Ipsum

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. Phasellus pharetra urna sit amet tellus elementum aliquet in et quam. In condimentum dui. This is body copy using Roboto at 20px, with a 28px line-height in the color of Black.

Large

Single Column - Copy - center (Section 7b)

Available Code Snippets:

  • Section 7b Base Return to base copy.

Available On:

Lorem Ipsum

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. Phasellus pharetra urna sit amet tellus elementum aliquet in et quam. In condimentum dui. This is body copy using Roboto at 20px, with a 28px line-height in the color of Black.

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black. Phasellus pharetra urna sit amet tellus elementum aliquet in et quam. In condimentum dui. This is body copy using Roboto at 20px, with a 28px line-height in the color of Black.

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black.

Icon Cards with Link

  • 4 icon cards with Link
  • 3 icon cards with Link
  • 5 icon cards with Link
  • 7 icon cards with Link

Notes

this section you can add and remove modules to match what ever the need is. The main difference is "4 Icon Cards with Link" is a 4 items per row and "3 Icon Cards With Link" is three modules per row.

To create new link modules for 3 columns copy "Icon Callout Action Link - Link 1"

To create new link modules for 4 columns copy "SG - 4 icon cards with Link-Icon Callout Action Link - Link 1"

To create new modules with out links for 3 columns copy "Call out with out Link"

To create new modules with out links for 4 columns copy "4 Column - Call out with out Link"

4 icon cards with Link (section 5a)

Notes:

See section 5 for full explanation.

To create new Items:

To create an item with a link, copy the module: SG - 4 icon cards with Link-Icon Callout Action Link - Link 1

To create an item WITHOUT a link, copy the module: 4 Column - Call out with out Link

Available On:

H2 40px Lorem Ipsum

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black.

3 icon cards with Link (section 5)

Notes:

For this section, you can add and remove modules, to change the number of items that are displayed. The main difference between the different variants of these sections is that "3 Icon Cards With Link" shows 3 items per row, while "4 Icon Cards with Link" shows four items per row.

To create new Items:

For the three-column sections, to create an item with a link, copy the module: Icon Callout Action Link - Link 1

For the four-column sections, to create an item with a link, copy the module: SG - 4 icon cards with Link-Icon Callout Action Link - Link 1

For the three-column sections, to create an item WITHOUT a link, copy the module: Call out with out Link

For the four-column sections, to create an item WITHOUT a link, copy the module: 4 Column - Call out with out Link

Available On:

Who We Hire

Whatever your experience level, background or skill set, there’s sure to be a place for you at UPS. Click on the profile most like you to learn more.

5 icon cards with Link (section 5b)

Notes:

See section 5 for full explanation.

To create new Items:

Even though this section contains 5 items by default, it displays them 3 per row. So, we use the modules made for 3 column sections:

To create an item with a link, copy the module: Icon Callout Action Link - Link 1

To create an item WITHOUT a link, copy the module: Call out with out Link

Available On:

Who We Hire

Whatever your experience level, background or skill set, there’s sure to be a place for you at UPS. Click on the profile most like you to learn more.

7 icon cards with Link (section 5c)

Notes:

See section 5 for full explanation.

To create new Items:

Even though this section contains 7 items by default, it displays them 4 per row. So, we use the modules made for 4 column sections:

To create an item with a link, copy the module: SG - 4 icon cards with Link-Icon Callout Action Link - Link 1

To create an item WITHOUT a link, copy the module: 4 Column - Call out with out Link

Available On:

H2 40px Lorem Ipsum

This is body copy using Roboto at 20px, with a 28px line-height in the color of Black.

Content Icon Cards

  • 3 content Icon cards
  • 4 content Icon cards
  • 5 content Icon cards
  • 7 content Icon cards

Snippets

Icon Card Content

Notes

this section you can add and remove modules to match what ever the need is. The main difference is "4 content Icon cards" is a 4 items per row and "3 content Icon cards" is three modules per row.

To create new Content Cards

for the three column sections Copy:  3 Icon Content Card - 1

For the four column sections copy: Icon Content Card - 1

to reset the a module to default content use the Icon Card Content Snippet

3 content icon cards (section 4)

For this section, you can add and remove modules, to change the number of items that are displayed. The main difference between the different variants of these sections is that "3 content Icon cards" shows 3 items per row, while "4 content Icon cards" shows four items per row.

For the three-column sections, Copy the module: 3 Icon Content Card - 1

For the four-column sections, Copy the module: Icon Content Card - 1

To reset the a module to default content, you can use the code snippet: Icon Card Content Snippet

Available Code Snippets:

  • Icon Card Content

Available On:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

4 content icon cards (section 4a)

Notes:

See section 4 for full explanation.

To create new Content Cards

Copy the module: Icon Content Card - 1

Available Code Snippets:

  • Icon Card Content

Available On:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

5 content icon cards (section 4b)

Notes:

See section 4 for full explanation.

To create new Content Cards

Even though this section contains 5 items by default, it displays them 3 per row. So, to create a new item for this section, copy the module: : 3 Icon Content Card - 1

Available Code Snippets:

  • Icon Card Content

Available On:

Who We Hire

Whatever your experience level, background or skill set, there’s sure to be a place for you at UPS. Click on the profile most like you to learn more.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

7 content icon cards (section 4c)

Notes:

See section 4 for full explanation.

To create new Content Cards

Even though this section contains 7 items by default, it displays them 4 per row. So, to create a new item for this section, copy the module: Icon Content Card - 1

Available Code Snippets:

  • Icon Card Content

Available On:

Who We Hire

Whatever your experience level, background or skill set, there’s sure to be a place for you at UPS. Click on the profile most like you to learn more.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

vertical Icons

3 vertical icon cards

4 vertical icon cards

5 vertical icon cards

7 vertical icon cards

Notes

this section you can add and remove modules to match what ever the need is. The main difference is "4 vertical icon cards" is a 4 items per row and "4 vertical icon cards" is three modules per row. both vertical Icons and Vertical Icons with copy are the same except for what is in default modules.

To create new Modules

for the three column sections Copy: Vertical Icon 1

For the four column sections copy: Vertical Icon Even 1

to reset the a module to default content use the vert Icon or Vert Icon with sub copy

3 vertical Icons with content

4 vertical Icon with content

5 vertical icon cards with content

7 vertical icon cards with content

for modules with copy

for the three column sections Copy: 3 vertical Icons with content-Vertical Icon 1

For the four column sections copy: Vertical Icon Even 1

Snippets

vert Icon

Vert Icon with sub copy

Vert Icon - Link

3 vertical icons cards (section 2)

Notes:

For this section, you can add and remove modules, to change the number of items that are displayed. The main difference between the different variants of these sections is that "4 vertical icon cards" shows 4 items per row, while "3 vertical icon cards" shows three modules per row.

"Vertical Icons" (section 2, this one) and "Vertical Icons with copy" (section 3) are the same, except for the presence of copy in the second one.

To add new Items

For the three-column sections, Copy the module: Vertical Icon 1

For the four-column sections, Copy the module: Vertical Icon Even 1

To reset a module to default content, you can use the code snippetvert Icon or Vert Icon with sub copy

Available Code Snippets:

  • vert Icon
  • Vert Icon with sub copy
  • Vert Icon - Link

Available On:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum Headline

Lorem Ipsum Headline

Lorem Ipsum Headline

4 vertical icon cards (section 2a)

Notes:

See section 2 for full explanation.

To create new Items

For the four column sections copy: Vertical Icon Even 1

Available Code Snippets:

  • vert Icon
  • Vert Icon with sub copy
  • Vert Icon - Link

Available On:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum Headline

Lorem Ipsum Headline

Lorem Ipsum Headline

Lorem Ipsum Headline

5 vertical icon cards (section 2b)

Notes:

See section 2 for full explanation.

To create new Items

Even though this section contains 5 items by default, it displays them 3 per row. So, to create a new item for this section, copy the module: Vertical Icon 1

Available Code Snippets:

  • vert Icon
  • Vert Icon with sub copy
  • Vert Icon - Link

Available On:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum Headline

Lorem Ipsum Headline

Lorem Ipsum Headline

Lorem Ipsum Headline

Lorem Ipsum Headline

7 vertical icon cards (section 2c)

Notes:

See section 2 for full explanation.

To create new Items

Even though this section contains 7 items by default, it displays them 4 per row. So, to create a new item for this section, copy the module: Vertical Icon Even 1

Available Code Snippets:

  • vert Icon
  • Vert Icon with sub copy
  • Vert Icon - Link

Available On:

Who We Hire

Whatever your experience level, background or skill set, there’s sure to be a place for you at UPS. Click on the profile most like you to learn more.

Lorem Ipsum Headline

Lorem Ipsum Headline

Lorem Ipsum Headline

Lorem Ipsum Headline

Lorem Ipsum Headline

Lorem Ipsum Headline

Lorem Ipsum Headline

3 vertical Icons with content (section 3)

Notes:

For this section, you can add and remove modules, to change the number of items that are displayed. The main difference between the different variants of these sections is that "3 vertical Icons with content" shows 3 items per row, while "4 vertical icon cards with content" shows four items per row.

"Vertical Icons" (section 2) and "Vertical Icons with copy" (section 3, this one) are the same, except for the presence of copy in the second one.

To add new Items

For the three-column sections, Copy the module: 3 vertical Icons with content-Vertical Icon 1

For the four-column sections, Copy the module: 4 vertical icon cards with content-Vertical Icon Even 1

To reset the a module to default content, you can use the code snippetvert Icon or Vert Icon with sub copy

Available Code Snippets:

  • vert Icon
  • Vert Icon with sub copy
  • Vert Icon - Link

Available On:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

4 vertical icon cards with content (section 3b)

Notes:

See section 3 for full explanation.

To add new Items

Copy the module: 4 vertical icon cards with content-Vertical Icon Even 1

Available Code Snippets:

  • vert Icon
  • Vert Icon with sub copy
  • Vert Icon - Link

Available On:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

5 vertical icon cards with content (section 3a)

Notes:

See section 3 for full explanation.

To add new Items

Even though this section contains 5 items by default, it displays them 3 per row. So, to create a new item for this section, copy the module: 3 vertical Icons with content-Vertical Icon 1

Available Code Snippets:

  • vert Icon
  • Vert Icon with sub copy
  • Vert Icon - Link

Available On:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

7 vertical Icons with Content (section 3c)

Notes:

See section 3 for full explanation.

To add new Items

Even though this section contains 7 items by default, it displays them 4 per row. So, to create a new item for this section, copy the module: 4 vertical icon cards with content-Vertical Icon Even 1

Available Code Snippets:

  • vert Icon
  • Vert Icon with sub copy
  • Vert Icon - Link

Available On:

Who We Hire

Whatever your experience level, background or skill set, there’s sure to be a place for you at UPS. Click on the profile most like you to learn more.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Related Content Sections

  • Related Content -|Content Display|
  • Related Content -|Feed|

Our Stories

Extra Modules

  • Video Call Out
  • Blue Banner - Employee Quote
  • Blue Alert Box

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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus varius blandit.

Job list / Recently View Jobs

  • Featured Jobs - Dynamic
  • Featured Jobs with out save button - Dynamic
  • Recently Viewed Jobs

Recently Viewed jobs is added via the "Use Existing" Menu

Jobs for You

See All Jobs

Jobs for You

See All Jobs

Recently Viewed Jobs

You haven't viewed any jobs yet. Start exploring now to find the perfect opportunity for you!

See All Jobs