{"componentChunkName":"component---src-pages-experimental-order-summary-template-usage-mdx","path":"/experimental/order-summary-template/usage/","result":{"pageContext":{"frontmatter":{"title":"Order summary template","description":"An order summary displays the estimated financial costs and configuration details of a service or offering.","tabs":["Usage","Style"]},"relativePagePath":"/experimental/order-summary-template/usage.mdx","titleType":"prepend","MdxNode":{"id":"1693d201-9e63-52a1-bc6a-d2850841f573","children":[],"parent":"4587a6c1-8e6f-5961-900c-6f7dd453002a","internal":{"content":"---\ntitle: Order summary template\ndescription: An order summary displays the estimated financial costs and configuration details of a service or offering.\ntabs: ['Usage', 'Style']\n---\n\n\n\nAn order summary displays the estimated financial costs and configuration details of a service or offering.\n\n\n\n#### Status:\n\n[Experimental](/experimental/overview)\n\n#### Maintainer:\n\n[Adriana Morales](https://www.github.com/adrianamorales)\n\n\n\nGeneral guidelines\nAnatomy\nExamples\n\n\n\n\n\nExample of an order summary\n\n## General guidelines\n\nOn a catalog details page, an order summary appears when a user is ordering a new service and configuring its details. Depending on the service, the summary component can show different content such as the details of a promo code or itemized costs of a service.\n\nThe summary highlights the default choices when a user first lands on the page, and updates the choices made as they customize the service. The choices are shown with a title and a subtitle.\n\nIf a user navigates away from the page, the summary should remain populated with the user's latest changes if they choose to return at a later time.\n\n## Anatomy\n\n#### Placement\n\nThe summary component is a grid influencer and stays fixed on the right side of the page, just below the global navigation bar.\n\n#### Title\n\nThe title should only contain the word “Summary”. Please do not introduce new terminology or labels in the title area.\n\n#### Content area\n\nDepending on the service, the summary component can include content such as an itemized list of costs for a service or a promo code field.\n\n#### Pricing and currency\n\nThe itemized list of costs should all be presented in the same currency (Euros, U.S. dollars, etc.).\n\n#### Terms and conditions\n\nWhen a user is creating a new service, they need to read and agree to the **Terms and Conditions** agreement. The create button is disabled until they check the box.\n\n#### Buttons\n\nThere are two buttons, one required primary button \"Create\" and one optional secondary button, which can say \"Save\", \"Clear\" or \"Save as template\" depending on the use case. The buttons always stick to the bottom of the page and lie above the fold.\n\nIf your service requires a reset or clear button in the summary component, be sure to include error checking and notify the user they will lose their changes.\n\n**Note: These button labels are still being explored and tested.**\n\n## Example\n\n\n\n**Last updated:** Aug 9, 2019\n","type":"Mdx","contentDigest":"e2a0955d4b60788a8247259b828fdf85","counter":1640,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Order summary template","description":"An order summary displays the estimated financial costs and configuration details of a service or offering.","tabs":["Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Order summary template\ndescription: An order summary displays the estimated financial costs and configuration details of a service or offering.\ntabs: ['Usage', 'Style']\n---\n\n\n\nAn order summary displays the estimated financial costs and configuration details of a service or offering.\n\n\n\n#### Status:\n\n[Experimental](/experimental/overview)\n\n#### Maintainer:\n\n[Adriana Morales](https://www.github.com/adrianamorales)\n\n\n\nGeneral guidelines\nAnatomy\nExamples\n\n\n\n\n\nExample of an order summary\n\n## General guidelines\n\nOn a catalog details page, an order summary appears when a user is ordering a new service and configuring its details. Depending on the service, the summary component can show different content such as the details of a promo code or itemized costs of a service.\n\nThe summary highlights the default choices when a user first lands on the page, and updates the choices made as they customize the service. The choices are shown with a title and a subtitle.\n\nIf a user navigates away from the page, the summary should remain populated with the user's latest changes if they choose to return at a later time.\n\n## Anatomy\n\n#### Placement\n\nThe summary component is a grid influencer and stays fixed on the right side of the page, just below the global navigation bar.\n\n#### Title\n\nThe title should only contain the word “Summary”. Please do not introduce new terminology or labels in the title area.\n\n#### Content area\n\nDepending on the service, the summary component can include content such as an itemized list of costs for a service or a promo code field.\n\n#### Pricing and currency\n\nThe itemized list of costs should all be presented in the same currency (Euros, U.S. dollars, etc.).\n\n#### Terms and conditions\n\nWhen a user is creating a new service, they need to read and agree to the **Terms and Conditions** agreement. The create button is disabled until they check the box.\n\n#### Buttons\n\nThere are two buttons, one required primary button \"Create\" and one optional secondary button, which can say \"Save\", \"Clear\" or \"Save as template\" depending on the use case. The buttons always stick to the bottom of the page and lie above the fold.\n\nIf your service requires a reset or clear button in the summary component, be sure to include error checking and notify the user they will lose their changes.\n\n**Note: These button labels are still being explored and tested.**\n\n## Example\n\n\n\n**Last updated:** Aug 9, 2019\n","fileAbsolutePath":"/zeit/3f757860/src/pages/experimental/order-summary-template/usage.mdx"}}}}