Stay organized with collections
Save and categorize content based on your preferences.
The Pane template presents detailed information and prominent actions.
For easy scanning, actions and information rows are limited to 4 each. This
template is useful for presenting non-editable metadata, such as location and
reservation details, and for taking action based on data. For a version of this
template with a map and no image, navigation apps can use the
Map + Content template.
This template can be embedded in the
Tab template
to provide tabbed navigation.
Location details for a parking app, with 2 related actions
(Android Auto example)Location details for a cafe, with two actions. The second action
button's associated text is truncated to its icon due to size constraints.
(Android Auto example)
Pane template UX requirements
App developers:
MUST
Include at least one row of information.
SHOULD
Designate a
primary
action when providing 2 actions.
SHOULD
Make navigation the primary action, when it's included as one of the
actions.
SHOULD
Provide icons for all actions.
SHOULD
Include a header with an optional title and primary and secondary
actions.
MAY
Include up to 4 rows of information and 2 actions.
[null,null,["Last updated 2024-07-23 UTC."],[[["\u003cp\u003eThe Pane template is designed to display detailed information and prominent actions, limiting information and action rows to 4 each for easy scanning.\u003c/p\u003e\n"],["\u003cp\u003eIt's ideal for presenting non-editable metadata and enabling actions based on that data, with options for headers, buttons, rows, and a large image.\u003c/p\u003e\n"],["\u003cp\u003eThis template can be embedded within the Tab template or the Map + Content template for enhanced navigation and display.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers must include at least one row of information and should prioritize a primary action, especially navigation, when including actions, along with providing icons for them.\u003c/p\u003e\n"],["\u003cp\u003eWhile optional, developers should consider using a header with title and actions, while limiting information rows and actions to a maximum of 4 and 2 respectively.\u003c/p\u003e\n"]]],[],null,["# Pane template\n\n\u003cbr /\u003e\n\nThe Pane template presents detailed information and prominent actions.\n\nFor easy scanning, actions and information rows are limited to 4 each. This\ntemplate is useful for presenting non-editable metadata, such as location and\nreservation details, and for taking action based on data. For a version of this\ntemplate with a map and no image, navigation apps can use the\n[Map + Content template](/cars/design/create-apps/apps-for-drivers/templates/map-content-template).\n\nThis template can be embedded in the\n[Tab template](/cars/design/create-apps/apps-for-drivers/templates/tab-template)\nto provide tabbed navigation.\n\nThis template can be included in the\n[Map + Content template](/cars/design/create-apps/apps-for-drivers/templates/map-content-template)\nto provide a pane on a map. \n**Includes:**\n\n- Optional [header](/cars/design/create-apps/apps-for-drivers/components/header)\n- Up to 2 [buttons](/cars/design/create-apps/apps-for-drivers/components/button), where one can be designated as [primary](/cars/design/create-apps/apps-for-drivers/components/button#primary) (optional)\n- Up to 4 non-actionable [rows](/cars/design/create-apps/apps-for-drivers/components/row) (1 row is mandatory)\n- Optional large image (see example)\n\n\u003cbr /\u003e\n\n| **Note:** This template highlights actions and information. For quick messages with less detail, use the [Message template](/cars/design/create-apps/apps-for-drivers/templates/message-template). For long messages, use the [Long Message template](/cars/design/create-apps/apps-for-drivers/templates/long-message-template).\n\nPane template examples\n----------------------\n\nLocation details for a parking app, with 2 related actions (Android Auto example) Location details for a cafe, with two actions. The second action button's associated text is truncated to its icon due to size constraints. (Android Auto example)\n\n\u003cbr /\u003e\n\nPane template UX requirements\n-----------------------------\n\nApp developers:\n\n|------------|-----------------------------------------------------------------------------------------------------------------------------|\n| **MUST** | Include at least one row of information. |\n| **SHOULD** | Designate a [primary](/cars/design/create-apps/apps-for-drivers/components/button#primary) action when providing 2 actions. |\n| **SHOULD** | Make navigation the primary action, when it's included as one of the actions. |\n| **SHOULD** | Provide icons for all actions. |\n| **SHOULD** | Include a header with an optional title and primary and secondary actions. |\n| **MAY** | Include up to 4 rows of information and 2 actions. |"]]
