Send feedback
Layout directives
Stay organized with collections
Save and categorize content based on your preferences.
This page lists directives related to Layout.
<walkthrough-footnote>FOOTNOTE_TEXT </walkthrough-footnote>
Renders the inner text in a footnote style. Insert this directive at the bottom
of the relevant step.
Icons
<walkthrough-ICON_NAME ></walkthrough-ICON_NAME >
Shows an icon.
Icon names
The following icons can be inserted into a line of text.
Inline icon name
Rendered icon
cloud-shell-icon
web-preview-icon
cloud-shell-editor-icon
nav-menu-icon
notification-menu-icon
pin-section-icon
The following icons are best shown as a standalone image.
Icon name
Rendered icon
conclusion-trophy
Note: For multi-step tutorials, make the conclusion trophy the first element in
the final step. Tutorial duration
<walkthrough-tutorial-duration duration="DURATION "></walkthrough-tutorial-duration>
Shows a clock icon and an estimate of how long the tutorial will take. For
multi-step tutorials, add this directive immediately after the title.
Parameters
Parameter
Type
Description
durationFloat
The estimated tutorial duration in minutes.
Send feedback
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-10-24 UTC.
Need to tell us more?
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Hard to understand","hardToUnderstand","thumb-down"],["Incorrect information or sample code","incorrectInformationOrSampleCode","thumb-down"],["Missing the information/samples I need","missingTheInformationSamplesINeed","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-10-24 UTC."],[],[]]
