Update docs

mckinsey · Dec 4, 2024 · 287ef61 · 287ef61
1 parent 8d63b8e
commit 287ef61
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 287 deletions.
diff --git a/vizro-core/docs/pages/tutorials/explore-components.md b/vizro-core/docs/pages/tutorials/explore-components.md
@@ -459,47 +459,17 @@ You can apply selectors to configure [`Filters`][vizro.models.Filter] and [`Para
 - [`Slider`][vizro.models.Slider]
 
 ## 4. The final touches
+Each page is added to the dashboard using the following line of code: `vm.Dashboard(pages=[first_page, second_page])`. 
+This ensures that all the pages are accessible.
 
-This section puts everything together by adding a homepage to the example for navigation between the two separate pages.
+By default, a navigation panel is added on the left side to switch between the two pages. 
 
-For easy navigation within your dashboard, we'll create a page that serves as the entry point for the user. On this homepage are two [`Cards`][vizro.models.Card] which serve as tiles that can be customized with a title, some text, and an image. These cards link to the subpages within your dashboard using their `href` attributes as `href="/first-page"` and `href="/second-page"`. This establishes the navigation links from the homepage to each of the subpages.
-
-Each page is added to the dashboard using the following line of code: `vm.Dashboard(pages=[home_page, first_page, second_page])`. This ensures that all the pages are accessible.
-
-The code below illustrates a functional dashboard where you can navigate from the homepage to each of the subpages. Additionally, you can use the navigation panel on the left side to switch between the three pages.
 
 !!! example "Final dashboard"
     === "Code"
         ```python
-        home_page = vm.Page(
-            title="Homepage",
-            components=[
-                vm.Card(
-                    text="""
-                    ![](https://raw.githubusercontent.com/mckinsey/vizro/786167c822cce65fe85ffad8ed000d8553a5ef44/vizro-core/docs/assets/images/collections.svg#icon-top)
-
-                    ### First Page
-
-                    Exemplary first dashboard page.
-                    """,
-                    href="/first-page",
-                ),
-                vm.Card(
-                    text="""
-                    ![](https://raw.githubusercontent.com/mckinsey/vizro/786167c822cce65fe85ffad8ed000d8553a5ef44/vizro-core/docs/assets/images/features.svg#icon-top)
-
-                    ### Second Page
-
-                    Exemplary second dashboard page.
-                    """,
-                    href="/second-page",
-                ),
-            ],
-        )
-
-        ...
-
         dashboard = vm.Dashboard(pages=[home_page, first_page, second_page])
+        Vizro().build(dashboard).run()
         ```
 
     === "app.py"
@@ -509,32 +479,6 @@ The code below illustrates a functional dashboard where you can navigate from th
         import vizro.models as vm
         import vizro.plotly.express as px
 
-        home_page = vm.Page(
-            title="Homepage",
-            components=[
-                vm.Card(
-                    text="""
-                    ![](https://raw.githubusercontent.com/mckinsey/vizro/786167c822cce65fe85ffad8ed000d8553a5ef44/vizro-core/docs/assets/images/collections.svg)
-
-                    ### First Page
-
-                    Exemplary first dashboard page.
-                    """,
-                    href="/first-page",
-                ),
-                vm.Card(
-                    text="""
-                    ![](https://raw.githubusercontent.com/mckinsey/vizro/786167c822cce65fe85ffad8ed000d8553a5ef44/vizro-core/docs/assets/images/features.svg#icon-top)
-
-                    ### Second Page
-
-                    Exemplary second dashboard page.
-                    """,
-                    href="/second-page",
-                ),
-            ],
-        )
-
         df = px.data.gapminder()
         gapminder_data = (
                 df.groupby(by=["continent", "year"]).
@@ -603,13 +547,10 @@ The code below illustrates a functional dashboard where you can navigate from th
             ],
         )
 
-        dashboard = vm.Dashboard(pages=[home_page, first_page, second_page])
+        dashboard = vm.Dashboard(pages=[first_page, second_page])
         Vizro().build(dashboard).run()
         ```
 
-    === "Homepage"
-        [![FinalPage]][finalpage]
-
     === "Subpage1"
         [![FinalPage1]][finalpage1]
 

diff --git a/vizro-core/docs/pages/user-guides/card-button.md b/vizro-core/docs/pages/user-guides/card-button.md
@@ -322,7 +322,7 @@ Note the added URL hash `#my-image`. Now create a CSS file placed in your `asset
 
 Use the following pre-defined URL hashes in your image path to apply Vizro's default styling.
 
-#### To float the image next to the text:
+**To float the image next to the text:**
 
 To float an image for example to the right of the text, use the `src` attribute as a CSS selector. Follow these steps:
 
@@ -404,13 +404,9 @@ To float an image for example to the right of the text, use the `src` attribute
     === "Result"
         [![CardImageFloating]][cardimagefloating]
 
-
 ### Make an icon responsive to theme switch
 
-To make an icon responsive to theme switching, override its
-[`filter` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/filter). In this example, we use the
-`--fill-icon-image-card` CSS variable from the `vizro-bootstrap` CSS file. It leverages the `invert()` function to
-flip the icon's color during a theme switch.
+To make an icon responsive to theme switching, override its [`filter` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/filter). In this example, we use the `--fill-icon-image-card` CSS variable from the `vizro-bootstrap` CSS file. It leverages the `invert()` function to flip the icon's color during a theme switch.
 
 This approach works if your icon initially has a white fill color. If not, modify the SVG code by adding `fill="white"`.
 
@@ -678,7 +674,6 @@ vm.Page.add_type("controls", vm.Button)
 [button]: ../../assets/user_guides/components/button.png
 [buttontext]: ../../assets/user_guides/components/button_text.png
 [card]: ../../assets/user_guides/components/card.png
-[cardicon]: ../../assets/user_guides/components/card_icon.png
 [cardimagedefault]: ../../assets/user_guides/components/card_image_default.png
 [cardimagefloating]: ../../assets/user_guides/components/card_image_floating.png
 [cardimagestyled]: ../../assets/user_guides/components/card_image_styled.png