-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
86 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { Aspect, Image } from '@marigold/components'; | ||
|
||
export default () => ( | ||
<Aspect ratio="landscape"> | ||
<Image | ||
fit="cover" | ||
position="bottom" | ||
src="https://images.unsplash.com/photo-1603910234616-3b5f4a6be2b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" | ||
alt="event_image" | ||
/> | ||
</Aspect> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { Image } from '@marigold/components'; | ||
|
||
export default () => ( | ||
<Image | ||
src="https://images.unsplash.com/photo-1603910234616-3b5f4a6be2b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" | ||
alt="event_image" | ||
/> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
--- | ||
title: Image | ||
group: Content | ||
caption: Component to render images | ||
--- | ||
|
||
The `<Image>` is a content component that renders an image on the page. | ||
|
||
The `src` property is always required. It can be used with a link or with an image from the server's file system. | ||
|
||
To improve accessibility, `alt` information should be provided whenever possible. | ||
The `alt` attribute holds a text description of the image and screen readers read this description out to their users so they know what the image means. The `alt` text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot. | ||
|
||
For more information about accessibility please visit [w3.org](https://www.w3.org/WAI/tutorials/images/tips/) or [bitvtest.de](https://ergebnis.bitvtest.de/pruefschritt/bitv-20-web/9-1-1-1b-alternativtexte-fuer-grafiken-und-objekte) | ||
|
||
## Usage | ||
|
||
### Import | ||
|
||
```tsx | ||
import { Image } from '@marigold/components'; | ||
``` | ||
|
||
### Apperance | ||
|
||
<AppearanceTable component={title} /> | ||
|
||
### Props | ||
|
||
<PropsTable | ||
props={[ | ||
{ | ||
property: 'alt (required)', | ||
type: 'string', | ||
description: | ||
'The alt tag contains descriptive text that is displayed when an image fails to load or is read aloud when a user interacts with a screen reader on the page.', | ||
default: '', | ||
}, | ||
{ | ||
property: 'fit', | ||
type: '"contain" | "cover" | "fill" | "none" | "scale-down"', | ||
description: 'Resized the Image to fit its container', | ||
default: '', | ||
}, | ||
{ | ||
property: 'position', | ||
type: '"bottom" | "center" | "left" | "right" | "top" | "leftBottom" | "rightBottom" | "leftTop" | "rightTop"', | ||
description: 'Position the Image inside the container when you use "fit"', | ||
default: '', | ||
}, | ||
]} | ||
/> | ||
|
||
## Usage | ||
|
||
### Simple Image | ||
|
||
In this example you can see a `<Image>` Component. | ||
|
||
<ComponentDemo file="./image.demo.tsx" /> | ||
|
||
### Image with fit and position | ||
|
||
In this example, the `<Image>` gets the `<fit>` property and the `<position>` property is set to bottom. You also need to wrap the `<Image>` in a `<Ratio>` component so that the fit and position properties can be used. | ||
|
||
<ComponentDemo file="./image-fit-position.demo.tsx" /> |
6179027
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
marigold-docs – ./
marigold-docs.vercel.app
marigold-docs-marigold.vercel.app
marigold-docs-git-main-marigold.vercel.app