module.exports = { id: 'images-captions', title: 'Images & captions', keywords: [`img`, `image`, `responsive`, `responsiveness`, `caption`, `figure`, `figcaption`], description: `

Image elements are responsive by default, automatically scaling down as necessary to display properly on smaller devices. Images retain their original aspect ratio and they will never scale above their original size.

If you want to add captions to images, you can use HTML5 figure elements, along with their related captions.

`, example: '
placeholder
Image caption
', samples: [`
<img src="image.png" alt="Image description"/>
`, `
<figure>
  <img src="image.png" alt="Image description"/>
  <figcaption>Image caption</figcaption>
</figure>
`], notes: [`While not mandatory, it is considered a good practice to always add a alt attribute to image elements on your web apps.`], customization: [ `You can change the text color of <figcaption> elements by changing the value of the --secondary-fore-color variable.`, `Universal margin for elements can be changed globally by changing the value of the --universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.` ], modifiers: [], dos: [], donts: [] }