1
0
mirror of synced 2025-12-19 18:10:59 -05:00

Add guidance on using CTAs to style guide (#35191)

Co-authored-by: Laura Coursen <lecoursen@github.com>
This commit is contained in:
Ethan Palm
2023-03-07 13:47:48 -08:00
committed by GitHub
parent 8609c70f5b
commit 1d8d6bcd98

View File

@@ -39,6 +39,16 @@ Warnings and danger notices are rendered in red `{% warning %}` tags.
For more information on formatting callouts, see “Callouts” in the [markup reference guide](content-markup-reference.md).
## Call to action (CTA) buttons
CTA buttons emphasize a link that we expect or encourage readers to navigate to after reading an article or as part of completing the task that an article describes. CTAs should only take people to GitHub-owned domains. For example, the CTA in "[Getting started with GitHub Copilot in Visual Studio Code](https://docs.github.com/en/copilot/getting-started-with-github-copilot/getting-started-with-github-copilot-in-visual-studio-code)" links to the [GitHub Copilot settings menu](https://github.com/settings/copilot) on github.com.
Only include a CTA button if navigating to the link supports user needs. Do not use CTA buttons solely for marketing GitHub features or products. In the above example, someone who wants to try Copilot must navigate to the GitHub Copilot settings menu and would likely want to after reading the article. In contrast, even though someone might use Copilot as part of writing code that they then create a pull request for, we would not add a "Try GitHub Copilot" CTA to "[Creating a pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request)" since Copilot is not connected to the user needs of "Creating a pull request." Most people will create pull requests without using Copilot. But people visiting articles about getting started with Copilot are probably interested in trying Copilot if they are not already using it. So we add the CTA button to help people get where they are trying to go.
Style your CTAs using the following format.
`<a href="https://github.com/DESTINATION/URL" target="_blank" class="btn btn-primary mt-3 mr-3 no-underline"><span>Try PRODUCT NAME</span> {% octicon "link-external" height:16 %}</a>`
## Code
### Code blocks