Unverified Commit bda92929 authored by Stuart Robson's avatar Stuart Robson Committed by GitHub
Browse files

The one that makes the `vf-figure` responsive. (#1304)

* small updates to the image CSS

* updates docs and changelog
parent ddbf0fa3
Pipeline #117121 passed with stages
in 10 minutes and 49 seconds
### 2.0.0
* Removed `width: 100%` from the `.vf-figure__image` class.
* Added `display: block` to the `.vf-figure__image` class.
* Removed CSS for the width when the `vf-figure` is using floats.
### 1.3.0
* adds loading="lazy" to the img element for better performance
......
......@@ -4,17 +4,15 @@
## About
The `vf-figure` componet defaults to give the image a maximum width of 100% so that it can be placed inside of a grid (like `vf-grid`) and fill the space of the grid item(s) that have been allocated by its parent.
The `vf-figure` component can be used to display and caption diagrams, illustrations, photos, etc. This is to be used as a 'single' item of content that if it was removed from the page or have its position moved in the DOM it would not affect the pages other content.
## Usage
If you need to specify the width of the component you can use the CSS custom property `--vf-figure__width` which will override the width in the CSS.
The `vf-figure` component also has some alignment class selectors available.
The `vf-figure` component can be used within any existing Visual Framework layout component. The size of the `vf-figure` is dictated by the size of the image rather and responds to the browser viewport if the viewport is smaller. The `vf-figure` component also has some alignment class selectors available which can float or centre the component in and around the other content on the page.
### Class Selectors
- `vf-figure--align`: required to align the component depending on where it is needed. This class also changes the width of the image to `auto` but can still be overriden with `--vf-figure__width`. The class also changes the `display` to `display: table` so that we can confine the `figcaption` inside of the `figure` HTML element without any overflow.
- `vf-figure--align`: required to align the component depending on where it is needed. The class also changes the `display` to `display: table` so that we can confine the `figcaption` inside of the `figure` HTML element without any overflow.
- `vf-figure--align-inline-start`: This class adds `float: left;`.
- `vf-figure--align-inline-end`: This class adds `float: right;`.
- `vf-figure--align-inline-centered`: This class adds `margin: 0 auto;`.
......
......@@ -14,19 +14,14 @@
}
.vf-figure__image {
display: block;
height: auto;
max-width: 100%;
width: var(--vf-figure__width, 100%);
}
.vf-figure--align {
display: table;
.vf-figure__image {
max-width: unset;
width: var(--vf-figure__width, auto);
}
.vf-figure__caption {
caption-side: bottom;
display: table-caption;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment