From 503d89d6c54195ff5107e6c99763fb805e7e9e8d Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Tue, 19 Nov 2024 13:20:37 +0100
Subject: [PATCH] Incorporate PR comments

---
 vizro-core/docs/pages/user-guides/card-button.md  | 15 +++++++++------
 .../visual-vocabulary/assets/css/custom.css       |  4 ++++
 .../visual-vocabulary/custom_components.py        |  1 +
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/vizro-core/docs/pages/user-guides/card-button.md b/vizro-core/docs/pages/user-guides/card-button.md
index 51ec62030..43d62fd60 100755
--- a/vizro-core/docs/pages/user-guides/card-button.md
+++ b/vizro-core/docs/pages/user-guides/card-button.md
@@ -485,8 +485,9 @@ img[src*="#my-image"] {
 This section describes how to use the [`Card`][vizro.models.Card] component to create a navigation card,
 enabling users to navigate to another page by clicking on the card area.
 
-For a button-style navigation component, see the [guide on creating a link button](#create-a-link-button).
-To configure the navigation panel on the left hand side of the screen, refer to the [guide on navigation](navigation.md).
+For a button-style link navigation component, see the [separate guide on creating a link button](#create-a-link-button).
+To configure the navigation panel on the left hand side of the screen, refer to the
+[separate guide on navigation](navigation.md).
 
 To create a navigation card:
 
@@ -633,10 +634,12 @@ You can configure the `text` argument to alter the display text of the [`Button`
 
 ### Create a link button
 
-To navigate to different pages using a button with an anchor tag, provide an absolute or relative URL to the 
+To navigate to a different page using a button with an anchor tag, assign an absolute or relative URL to the 
 `Button.href`.
 
 ```python
+import vizro.models as vm
+
 vm.Button(text="Leave us a star! ⭐", href="https://github.com/mckinsey/vizro")
 ```
 
@@ -644,10 +647,10 @@ vm.Button(text="Leave us a star! ⭐", href="https://github.com/mckinsey/vizro")
 
 You can use the [`Button`][vizro.models.Button] to trigger predefined action functions, such as exporting data. 
 To explore the available options for [`Actions`][vizro.models.Action], refer to our [API reference][vizro.actions]. 
-Use the `Button.actions` argument to specify which action function should be executed when the button is clicked.
+Use the `Button.actions` argument to specify which action function executes when the button is clicked.
 
-In the example below, we demonstrate how to configure a button to export the filtered data of a target chart using the 
-[export_data][vizro.actions.export_data] action function
+The example below demonstrates how to configure a button to export the filtered data of a target chart using the
+[export_data][vizro.actions.export_data] action function.
 
 
 !!! example "Button with action"
diff --git a/vizro-core/examples/visual-vocabulary/assets/css/custom.css b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
index 367f34de4..db65291cd 100644
--- a/vizro-core/examples/visual-vocabulary/assets/css/custom.css
+++ b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
@@ -34,6 +34,10 @@ img[src*="#chart-icon"] {
   position: relative;
 }
 
+.code-clipboard-container .pycafe-link {
+  margin-bottom: 12px;
+}
+
 .code-clipboard-container::-webkit-scrollbar-thumb {
   border-color: var(--surfaces-bg-card);
 }
diff --git a/vizro-core/examples/visual-vocabulary/custom_components.py b/vizro-core/examples/visual-vocabulary/custom_components.py
index 28b4835d0..d88dcf543 100644
--- a/vizro-core/examples/visual-vocabulary/custom_components.py
+++ b/vizro-core/examples/visual-vocabulary/custom_components.py
@@ -33,6 +33,7 @@ def build(self):
             ],
             href=f"https://py.cafe/snippet/vizro/v1#code={quote(self.code)}",
             target="_blank",
+            className="pycafe-link",
         )
 
         return html.Div(