diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index 370457789..10a1a5d88 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -332,7 +332,7 @@
Sponsor
- Star
+ Star
Follow
@@ -456,6 +456,27 @@
\`\`\`
+
+
+
+ Shoelace is designed, developed, and maintained by Cory LaViska.
+ Please sponsor my work on GitHub! Your support will keep this project alive and growing!
+
+
+
+
+ Sponsor Development
+
+
+
+ Star on GitHub
+
+
+
+ Follow on Twitter
+
+
+
`;
}
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index f2e6ef049..e4172300c 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -490,6 +490,20 @@ kbd,
background-color: var(--sl-color-neutral-100);
}
+/* Sponsorship callouts */
+.sponsor-callout {
+ background: var(--sl-color-warning-100);
+ border-left: solid 3px var(--sl-color-warning-300);
+ border-radius: var(--sl-border-radius-medium);
+ padding: 0.5rem 1.5rem;
+}
+
+@media screen and (max-width: 950px) {
+ .sponsor-callout__secondary-label {
+ display: none;
+ }
+}
+
/* Component headers */
.component-header {
border-bottom: solid 1px var(--sl-color-neutral-200);
diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md
index 99bfe4739..b7b57ad44 100644
--- a/docs/getting-started/overview.md
+++ b/docs/getting-started/overview.md
@@ -106,7 +106,7 @@ Designing, developing, and supporting this library requires a lot of time, effor
- Star
+ Star