[Tidy] Remove CSS classes to position image

vizro-core/changelog.d/20241204_135618_huong_li_nguyen_remove_custom_img_css.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Removed
+
+- Remove built-in CSS shortcuts `#floating-*` to float images. These can still be provided manually. ([#919](https://github.com/mckinsey/vizro/pull/919))
+
+
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/docs/pages/user-guides/card-button.md

@@ -324,16 +324,18 @@ Use the following pre-defined URL hashes in your image path to apply Vizro's def
 
 #### To float the image next to the text:
 
-- floating-left: `![](my_image.png#floating-left)`
-- floating-right: `![](my_image.png#floating-right)`
-- floating-center: `![](my_image.png#floating-center)`
+To float an image for example to the right of the text, use the `src` attribute as a CSS selector. Follow these steps:
+
+1. Add a hash (#) to the image URL, e.g., `![](assets/images/continents/europe.svg#my-image)`
+1. Target that hash in your custom CSS file `img[src*="#my-image"] { float: right; }`
 
 !!! example "Card with floating image"
     === "images.css"
         ```css
         img[src*="#my-image"] {
             width: 120px;
             height: 120px;
+            float: right;
         }
         ```
 
@@ -349,7 +351,7 @@ Use the following pre-defined URL hashes in your image path to apply Vizro's def
                         text="""
                         ### My card with floating image!
 
-                        ![](assets/images/continents/europe.svg#my-image#floating-right)
+                        ![](assets/images/continents/europe.svg#my-image)
 
                          Commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit.
 
@@ -381,7 +383,7 @@ Use the following pre-defined URL hashes in your image path to apply Vizro's def
         pages:
           - components:
               - text: |
-                  ![](assets/images/continents/europe.svg#my-image#floating-right)
+                  ![](assets/images/continents/europe.svg#my-image)
 
                   Commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit.
 
@@ -402,63 +404,19 @@ Use the following pre-defined URL hashes in your image path to apply Vizro's def
     === "Result"
         [![CardImageFloating]][cardimagefloating]
 
-#### Card with icon
-
-- default icon styling (`icon-top`): `![](my_image.png#icon-top)`
-
-!!! example "Card with icon"
-    === "app.py"
-        ```{.python pycafe-link}
-        import vizro.models as vm
-        from vizro import Vizro
-
-        page = vm.Page(
-            title="Card with icon",
-            components=[
-                vm.Card(
-                    text="""
-                    ![](https://raw.githubusercontent.com/mckinsey/vizro/d24a6f0d4efdf3c47392458e64b190fa1f92b2a7/vizro-core/docs/assets/images/hypotheses.svg#icon-top)
-
-                    ### Card Title
-
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla dictum lacus eget fringilla.
-                    Maecenas in various nibh, quis venenatis nulla. Integer et libero ultrices, scelerisque velit sed.
-                    """,
-                ),
-            ],
-        )
-
-        dashboard = vm.Dashboard(pages=[page])
-        Vizro().build(dashboard).run()
-        ```
-
-    === "app.yaml"
-        ```yaml
-        # Still requires a .py to add data to the data manager and parse YAML configuration
-        # See from_yaml example
-        pages:
-          - components:
-              - text: |
-                  ![](assets/images/icons/hypotheses.svg#icon-top)
-
-                  ### Card Title
-
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla dictum lacus eget fringilla.
-                  Maecenas in various nibh, quis venenatis nulla. Integer et libero ultrices, scelerisque velit sed.
-                type: card
-            title: Card with icon
-        ```
-
-    === "Result"
-        [![CardIcon]][cardicon]
 
 ### Make an icon responsive to theme switch
 
-To make an icon responsive to the theme switch, override the value of the [`filter` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/filter). The `filter` CSS property lets you add visual effects to elements using different functions. In our example, we're using the `--inverse-color` CSS variable from the Vizro theme. It uses the CSS `invert()` function to flip the color of the icon when you switch themes. Note that this only works if your initial icon has a white fill color. If your icon is not white, you can change its color by adding `fill="white"` to the SVG code. Assign the predefined CSS variable `--inverse-color` to the `filter` property of your selected icon.
+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"`.
 
 ```css
 img[src*="#my-image"] {
-    filter: var(--inverse-color);
+    filter: var(--fill-icon-image-card);
 }
 ```
 

vizro-core/examples/dev/assets/css/custom.css

@@ -42,3 +42,9 @@
 img#banner {
   height: 16px;
 }
+
+img[src*="icon-top"] {
+  filter: var(--fill-icon-image-card);
+  height: 36px;
+  width: 36px;
+}