Skip to main content

Individual blocks

Accordion Block

The Accordion block is ideal for displaying large amounts of information like FAQs, while not taking up too much space on the page due to the expand/collapse feature.

A good rule of thumb is to have between 2 and 6 accordion sections.

  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet

Accordion Tabbed Block

The Accordion Tabbed block is also ideal for displaying large amounts of information into nested groupings. Tab labels should be as short as possible. One to 3 words per label is ideal.

  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet

Chart Block

%Data Set 1%Data Set 2

For visualization & data comparison

%Data A
%Data B
%Data C
%Data D
%Data E
%Data F
%Data G

Content Items Block - Text style

The block takes advantage of visual elements to differentiate several subtopics that can be grouped together under one main topic. Use them in a sequence to describe multiple dimensions of an idea. You can use it with or without visual assets (images/icons/badges).

Eyebrow 1

Item heading 1

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

Optional CTA
Eyebrow 2

Item heading 2

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

Optional CTA
Eyebrow 1

Item heading 3

Lorem ipsum dolor sit amet

  • Bullet 1
  • Bullet 2
  • Bullet 3

Content Items Block - Card style

The block takes advantage of visual elements to differentiate several subtopics that can be grouped together under one main topic. Use them in a sequence to describe multiple dimensions of an idea. You can use it with or without visual assets (images/icons/badges).

Eyebrow 1

Item heading 1

Optional CTA
Eyebrow 2

Item heading 2

Optional CTA
Eyebrow 1

Item heading 3

Highlight Block

The Highlight block can be used at the top of the page, as well as within a page, to frame and introduce key ideas.

Secondary CTA

Highlight block

Use a Highlight block within a page to frame and introduce key ideas.

Map Block

Map blocks are used to display coordinates and provide directions to different locations. This Map block uses CSV file upload to display coordinates and give directions to those locations. The Longitude and Latitude values are optional.

Find a Location

Location marker
555 Market Street, San Francisco, CA, 94105

Location marker
1455 Market Street, San Francisco, CA, 94103

Location marker
455 Market St, San Francisco, CA 94105

Media Block

Use images and video to add emotion to your storytelling. For guidelines on creating assets, refer to the Chameleon Media and Image Playbook.

Go to the media and image playbook

Media block

Use images and video to add emotion to your storytelling. For guidelines on creating assets, refer to the Chameleon Media and Image Playbook.

Go to the media and image playbook

Pick up Drop off (PUDO) Block

Use this at the top of the page to introduce simplify rides. User is required to enter pickup location, drop off location, and click in the CTA to progress to m.dot.

search
Navigate right up
search
Submit text
Secondary CTA
search
Navigate right up
search
Submit text
Secondary CTA

Table Block - Example # 1

Use the Table block to compare metrics and detailed figures in a clear, organized layout. It’s perfect for showing structured data, but works best when you keep it simple.

Table Block - Example # 1

Header Item 1

Header Item 2

Header Item 3

XXX,XXX,XXX

XXX,XXX,XXX

XXX,XXX

XXX,XXX

XXX,XXX,XXX

XX,XXX

XX,XXX

XXX,XXX,XXX

XXX,XXX

XXX,XXX

XXX,XXX,XXX

XXX,XXX,XXX

Legal text here is optional. If added, should be related to the table's content.

Table Block - Example # 2

Example with expanded content in the first column and images.

Enable the header column by selecting yes for the Show Y-Axis Header Column? field in the Design tab.

Table Block - Example # 2

Header Item 1

Subtitle

Header Item 2

Subtitle

Header Item 3

Subtitle

Header Item 4

Subtitle

Table Row 1

Expanded content. Expanded content.

Plus

Row item 1

Row item 2

Row item 3

Row item 4

Table Row 2

Expanded content. Expanded content.

Plus

Table Row 3

To include empty cells or cells that only use the image, ensure you add a space in the Item title field.

Table Row 4

Expanded content. Expanded content.

Expanded CTA
Plus

Legal text here is optional. If added, should be related to the table's content.

Uber Reserve Block

Destination
Choose date and time

Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.

Selected date is Jun 16.

1:14 AM
Reserve your ride

Reserve may not be available for your pickup location

Bullets - Tabs

Similar to the Bullets Carousel block, the Bullets Tabbed block is another way to truncate content in an easy to navigate format. There is a max of 3 tabs and a limit of 9 items per tab.

Optional CTA

Gallery Block

Use this block to showcase related highlight cards.

You must have a minimum of 3 cards (if not, the Content Items block is more appropriate). You can use images or embedded video.

1/4

Mosaic block

Flexible 2x2 card

Body copy can be added here

CTA #2

Flexible 1x2 card

Flexible 1x2 card

Example with solid background and image

Immersive Full 2x

Example card with x-large heading

Use this block to group related links within a page. Use a 1:1 image within a card to better illustrate your story. Avoid long headlines and keep the body text short to prevent copy from expanding and breaking the design of the card component.

Sub Heading

Section Heading

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

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

Sub Headling

Section Heading

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

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

Sub Heading

Section Heading

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

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

Sub Heading

Section Heading

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

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

List blocks

Content Connected Block

This block is ideal for representing linear flows and how-to instructions. You can also include images, icon or badges.

Lorem ipsum

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

Lorem ipsum

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

Lorem ipsum

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

Lorem ipsum

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

List Text Links Block

This block can be used to sort a large amount of information. Block links and sections are populated manually ,or through a CSV file. The top 3 rows of the CSV file shouldn’t be touched or edited. Only input data starting with row 4.

You can choose from a 2-up or 3-up column layout. The Anchor Links (Quick Links) below are optional.

Text blocks

Notification Block

Notifications appear at the top of the page above all other blocks. Once dismissed, these messages will not appear again in the current browser session. Remember to revisit and remove this block from the page after the relevant notification time frame. You can select from 4 classes of notifications with associated colors: POLICY (blue): safety messages, local and federal regulation, PROMOTION (green): discounts, free rides, money back, AWARENESS (orange): news, updates, ALERT(red): emergencies, errors (non-dismissible)

X small

Text Block

Use this block to create long-form text content and multi-column text content. It can be broken into as many as 3 columns of text blocks per row. An option to include quotes about the content allows you to change the background color and indent the text.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Quote example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Admin Only Blocks

This next section covers Admin Only blocks, meaning only Admins can add and edit these type of blocks. The list of Admin Only blocks includes:

  • Acuity Scheduler
  • Driver Signup
  • WhatsApp Phone Intake block

Non-authorable blocks

This next section covers non-authorable blocks, meaning authors can't edit the content of the blocks. The list of non-authorable blocks includes:

  • Driver Guarantee - This block is used to display the guaranteed earnings for a certain amount of completed trips when someone signs up to be a driver in an eligible city with the offer.
  • Fare Estimator (Price Estimator) -This block can be used to show Uber trip prices from one point to another. Block data is dynamically pulled from a variety of back-end services.
  • Navigation and Footer - The top Navigation bar and the bottom Footer are required and will appear automatically on your page once you publish in Chameleon.
  • Product Carousel (Bullets Product Carousel) - This block displays the Uber products available in the user's location. Block data is dynamically pulled in from Cascade (it updates automatically from this separately managed data source).
  • uRate - This block is a rating widget that enables users to provide feedback on our pages. They can submit a rating and write an optional comment. This will be a default on the bottom of every page except the Uber.com home page, campaign pages, and 404 pages.

Greenlight block

Displays a list of nearby Greenlight centers, make sure to select a city with available centers in the Footer.

Merchant sign up form

This form is used as the entry-point for merchant (restaurant, alcohol, grocery, etc.) sign ups within pages powered by Chameleon.

Updated form title

Already have an account?

+1
Start Typing...
We’ll use this to help organize information that is shared across stores, such as menus.
Select...
+225
Eat
Ride
Drive
Deliver

Discover delicious eats

Order delivery from restaurants you love.

Order now
Own a restaurant? Partner with Uber Eats

Request a ride now

Request nowSchedule for later

Get in the driver's seat and get paid

Drive on the platform with the largest network of active riders.

Sign up to drive

Having trouble? We're here to help

Select your preferred language

English, EnglishFrench, Français (France)

    Select your preferred language

    English, EnglishFrench, Français (France)