diff --git a/assets/scss/_pageinfo.scss b/assets/scss/_pageinfo.scss
index 92955a8bf..738c2b028 100644
--- a/assets/scss/_pageinfo.scss
+++ b/assets/scss/_pageinfo.scss
@@ -1,16 +1,15 @@
 .pageinfo {
   font-weight: $font-weight-medium;
-  background: $gray-100;
+  background: var(--bs-alert-bg);
   color: inherit;
-  border-radius: 0;
-  margin: 2rem;
+  margin: 2rem auto;
   padding: 1.5rem;
   padding-bottom: 0.5rem;
 
   @each $color, $value in $theme-colors {
     &-#{$color} {
-      border-style: solid;
-      border-color: $value;
+      @extend .alert-#{$color};
+      border-width: 0;
     }
   }
 }
diff --git a/userguide/content/en/docs/adding-content/shortcodes/index.md b/userguide/content/en/docs/adding-content/shortcodes/index.md
index 697b9f991..9bcdcc5aa 100644
--- a/userguide/content/en/docs/adding-content/shortcodes/index.md
+++ b/userguide/content/en/docs/adding-content/shortcodes/index.md
@@ -174,14 +174,14 @@ This is a warning.
 The **pageinfo** shortcode creates a text box that you can use to add banner information for a page: for example, letting users know that the page contains placeholder content, that the content is deprecated, or that it documents a beta feature.
 
 ```go-html-template
-{{%/* pageinfo color="primary" */%}}
+{{%/* pageinfo color="info" */%}}
 This is placeholder content.
 {{%/* /pageinfo */%}}
 ```
 
 Renders to:
 
-{{% pageinfo color="primary" %}}
+{{% pageinfo color="info" %}}
 This is placeholder content
 {{% /pageinfo %}}