--- title: "Store Badge Lockup" description: "Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action." --- import { InstallCommand } from "/snippets/install-command.jsx"; import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; ```html store-badge-lockup.html Store Badge Lockup ``` ## Install That writes one file: `compositions/components/store-badge-lockup.html`. ## Paste it into your composition Open `compositions/components/store-badge-lockup.html` and copy what is inside into your own composition. A component has no size or duration of its own. It takes both from the composition you paste it into. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | --- | --- | --- | --- | | `headline` | `Get the app` | string | Short action line shown above the store badges. | | `showApple` | `yes` | `yes`, `no` | Show or hide the App Store badge. | | `showGoogle` | `yes` | `yes`, `no` | Show or hide the Google Play badge. | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap
``` ## Source ```html Store Badge Lockup ``` {/* hf:generated-footer */} Tagged `prop` `ui-props` `mobile` `store-badges` `cta` `ask`. ## Related topics - [Browse the complete Catalog](/catalog) - [Add assets and Catalog items in Studio](/studio/assets-and-blocks) - [Build a richer composition](/go-further)