> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.
# Social Proof Card
> The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup
# Social Proof Card
The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup
**Social Proof Card**
```html social-proof-card.html theme={null}
Social Proof Card
HyperFrames
12,000+ creators
Start rendering free
```
Copy npx hyperframes add social-proof-card to the clipboard
That writes one file: `compositions/components/social-proof-card.html`.
## Paste it into your composition
Open `compositions/components/social-proof-card.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 | | |
| - | - | - | - | - | - |
| `brand` | `HyperFrames` | string | Wordmark at the top of the card. | | |
| `proof` | `12,000+ creators` | string | Social-proof line under the stars. | | |
| `cta` | `Start rendering free` | string | Label on the closing capsule. | | |
| `f1` | \`Write | plain HTML\` | string | First feature, | breaks the line. |
| `f2` | \`Render | pixel-perfect\` | string | Second feature, | breaks the line. |
| `f3` | \`Own | every line\` | string | Third feature, | breaks the line. |
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 theme={null}
```
Tagged `motion-primitive` `social-proof` `end-card` `cta` `vertical`.
Created by Miao Yang.
## Related topics
* [Browse the complete Catalog](/catalog.md)
* [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md)
* [Put blocks together into one video](/concepts/compositions.md)
## Related topics
- [Testimonial Proof Card](/catalog/components/testimonial-proof-card.md)
- [Testimonial Card](/catalog/components/testimonial-card.md)
- [Comment Cards](/catalog/blocks/yt-comment-card.md)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.