diff --git a/.changeset/short-pugs-press.md b/.changeset/short-pugs-press.md
new file mode 100644
index 00000000..4bed8471
--- /dev/null
+++ b/.changeset/short-pugs-press.md
@@ -0,0 +1,7 @@
+---
+"@primer/css": minor
+---
+
+Marketing: Add link components
+Marketing: Add animated arrow utility
+Marketing: Document button components with arrows
\ No newline at end of file
diff --git a/docs/content/components/marketing-buttons.md b/docs/content/components/marketing-buttons.md
index d0752e21..6e09b376 100644
--- a/docs/content/components/marketing-buttons.md
+++ b/docs/content/components/marketing-buttons.md
@@ -43,3 +43,41 @@ Marketing buttons can be set to three different sizes:
```
+
+## Animated arrow symbol
+
+Marketing buttons can include an animated arrow symbol, by adding a class `arrow-target-mktg` and including the SVG symbol:
+
+```html live
+
+
+
+
+
+
+
+```
diff --git a/docs/content/components/marketing-links.md b/docs/content/components/marketing-links.md
new file mode 100644
index 00000000..3832f9f6
--- /dev/null
+++ b/docs/content/components/marketing-links.md
@@ -0,0 +1,76 @@
+---
+title: Marketing links
+path: components/marketing-links
+status: Beta
+source: 'https://github.com/primer/css/tree/main/src/marketing/links'
+bundle: marketing-links
+---
+
+Marketing links can be produced by combining the base class `link-mktg` with a set of modifier classes to control the size and color.
+
+
+## Link sizes
+
+The marketing link size is defined with utility classes and come in large (`.f3-mktg`) and small (`.f4-mktg`):
+
+```html live
+
+ Call to action
+
+
+
+```
+
+```html live
+
+ Call to action
+
+
+
+```
+
+## Link with emphasis
+
+Add class `link-emphasis-mktg` to the link, to give it a pale underline, that will fill up on hover.
+
+```html live
+
+ Call to action
+
+
+
+```
+
+
+## Link colors
+
+The link color is controlled with the [Primer color classes](/utilities/colors), while the symbol and underline styling will follow:
+
+```html live
+
+ Call to action
+
+
+
+
+
+ Call to action
+
+
+
+```
\ No newline at end of file
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index fe4ed608..72a76979 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -93,6 +93,8 @@
url: /components/markdown
- title: Marketing buttons
url: /components/marketing-buttons
+ - title: Marketing links
+ url: /components/marketing-links
- title: Navigation
url: /components/navigation
- title: Pagination
diff --git a/src/marketing/index.scss b/src/marketing/index.scss
index cd476792..3055ae84 100755
--- a/src/marketing/index.scss
+++ b/src/marketing/index.scss
@@ -11,4 +11,5 @@
// marketing specific css modules
@import './type/index.scss';
@import './buttons/index.scss';
+@import './links/index.scss';
@import './utilities/index.scss';
diff --git a/src/marketing/links/index.scss b/src/marketing/links/index.scss
new file mode 100644
index 00000000..f5dd4620
--- /dev/null
+++ b/src/marketing/links/index.scss
@@ -0,0 +1,3 @@
+// support files
+@import '../support/index.scss';
+@import './link.scss';
diff --git a/src/marketing/links/link.scss b/src/marketing/links/link.scss
new file mode 100644
index 00000000..13dd30aa
--- /dev/null
+++ b/src/marketing/links/link.scss
@@ -0,0 +1,50 @@
+.link-mktg {
+ position: relative;
+ display: inline-block;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ &:active {
+ outline: none;
+ }
+
+ &::after,
+ &.link-emphasis-mktg::before {
+ position: absolute;
+ bottom: -0.15em;
+ left: 0;
+ width: calc(100% - 1em);
+ height: 2px;
+ pointer-events: none;
+ content: '';
+ // stylelint-disable-next-line primer/colors
+ background-color: currentColor;
+ transform: scaleX(0);
+ transform-origin: 0 0;
+
+ @media screen and (prefers-reduced-motion: no-preference) {
+ transition: transform 0.3s ease;
+ }
+ }
+
+ &.link-emphasis-mktg::before {
+ opacity: 0.2;
+ transform: scaleX(1);
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ &::after {
+ transform: scaleX(1);
+ }
+ }
+
+ &.arrow-target-mktg {
+ .arrow-symbol-mktg {
+ margin-left: -$em-spacer-3;
+ }
+ }
+}
diff --git a/src/marketing/utilities/animations.scss b/src/marketing/utilities/animations.scss
index 49061405..1a362bc1 100644
--- a/src/marketing/utilities/animations.scss
+++ b/src/marketing/utilities/animations.scss
@@ -7,3 +7,45 @@
transform: scale3d(1.025, 1.025, 1.025);
}
}
+
+// Animated arrow symbol, used in marketing links, buttons, etc.
+.btn-mktg,
+.link-mktg,
+.arrow-target-mktg {
+ .octicon {
+ width: 1em;
+ height: 1em;
+ }
+
+ .arrow-symbol-mktg {
+ transition: transform 0.2s;
+ transform: translateX(0);
+
+ // stylelint-disable-next-line selector-max-type
+ path:last-child {
+ stroke-dasharray: 10;
+ stroke-dashoffset: 10;
+ transition: stroke-dashoffset 0.2s;
+ }
+ }
+
+ @media screen and (prefers-reduced-motion: no-preference) {
+ &:hover,
+ &:focus {
+ .arrow-symbol-mktg {
+ transform: translateX(4px);
+
+ // stylelint-disable-next-line selector-max-type, selector-max-specificity, max-nesting-depth
+ path:last-child {
+ stroke-dashoffset: 20;
+ }
+ }
+ }
+
+ &:active {
+ .arrow-symbol-mktg {
+ transform: translateX(6px);
+ }
+ }
+ }
+}