eola Style Guide 2024: Cover Image

Cover Image

This component can be used for only loading images or display top and bottom messages as well.

Examples

CoverImage

<Grid gridGap={2} gridAutoFlow="column" width="100%">
  <CoverImage src={imageUrl} top={<><strong>Bold message</strong></>} bottom={<>Accepts html tags</>} />
  <CoverImage src={imageUrl} top="Top message" bottom="Bottom message" />
</Grid>

Only Image

 <CoverImage src={imageUrl} round={false} />

Fallback

 <CoverImage round={false} />