Images

Example :: Hero Image

We Are All Heroes

Just look around...

Source Credit: Unsplash


<script>
  import { Image } from '@colorfuldots/svelteit'
  let title = "We Are All Heroes"
  let description = "Just look around..."
  let height = 500
</script>

<Image 
  hero
  {title}
  {description}
  img={imgSource1}
  {height}
/>

Example :: Hero Image + Button

We Are All Heroes

Just look around...

Source Credit: Unsplash


<script>
  import { Image } from '@colorfuldots/svelteit'
  let title = "We Are All Heroes"
  let description = "Just look around..."
  let buttonTitle = "Click Me"
  let height = 500
  let route = () => alert('go to route')
</script>

<Image 
  hero
  {title}
  {description}
  img={imgSource1}
  {buttonTitle}
  {height}
  buttonRoute={route} 
/>

Example :: Thumbnail Image

Source Credit: Unsplash


<script>
  import { Image } from '@colorfuldots/svelteit'
  let title = "Some Other Image"
  let thumbRoute = 'javascript:void(0);'
</script>

<Image
  thumbnail
  {title}
  img={imgSource3}
  height={100}
  width={null}
  linkRoute={thumbRoute} 
/>
<Image
  thumbnail
  {title}
  img={imgSource4}
  height={100}
  width={null}
  linkRoute={thumbRoute} 
/>
<Image
  thumbnail
  {title}
  img={imgSource5}
  height={100}
  width={null}
  linkRoute={thumbRoute}   
/>

API

Prop Name	Type	Is Required	Default Value	Description
title	string	true	null	Sets the title of the image text and alt text for SEO and accessibility compliance
img	string	true	null	URL or path of your image
hero, thumbnail, slideshow, lightbox, responsive	bool	true	null	Sets type of image to render

Images

The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src and alt. Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.