linkHero Images

Hero images help you quickly establish the general mood of your blog post. You can add them to your posts using Hero markdown component:

1link> :Hero src=https://images.unsplash.com/photo-1533069027836-fa937181a8ce?w=2000&h=600&fit=crop

2link

3link# Hero Images

4link

5link...

If you use Hero images on your page, the first image will be used as an automatic banner for social media cards (i.e. when you share on Twitter or Facebook). You of-course override this by providing page-specific meta overrides.

linkCaptions

You can add captions to your hero images by adding some content to the blockquote:

1link> :Hero src=https://images.unsplash.com/photo-1533069027836-fa937181a8ce?w=2000&h=600&fit=crop

2link>

3link> Photo by [Paweł Czerwiński](https://unsplash.com/@pawel_czerwinski) on [Unsplash](https://unsplash.com)

Photo by Paweł Czerwiński on Unsplash

warning CAUTION

I would recommend against adding captions to first hero image of the page, as it might confuse the automatic title guessing mechanism of CODEDOC.

linkDark Mode / Light Mode

You can limit a particular hero image to dark mode or light mode, in case you prefer using different images for each mode. Simply set the mode attribute to dark or light, to limit the hero for that mode:

1link> :Hero src=https://images.unsplash.com/photo-1540850840617-cae8f6e46284?w=2000&h=600&fit=crop,

2link>       mode=dark

3link>

4link> Photo by [David Severin](https://unsplash.com/@desiderius) on [Unsplash](https://unsplash.com)

5link

6link> :Hero src=https://images.unsplash.com/photo-1533069027836-fa937181a8ce?w=2000&h=600&fit=crop,

7link>       mode=light

8link>

9link> Photo by [Paweł Czerwiński](https://unsplash.com/@pawel_czerwinski) on [Unsplash](https://unsplash.com)

Photo by David Severin on Unsplash

Photo by Paweł Czerwiński on Unsplash

linkResponsive Heroes

You can similarly restrict a hero image to a particular target device via target attribute, that can be set to either mobile or desktop:

1link> :Hero src=https://images.unsplash.com/photo-1540850840617-cae8f6e46284?w=2000&h=600&fit=crop,

2link>       target=desktop

3link>

4link> Photo by [David Severin](https://unsplash.com/@desiderius) on [Unsplash](https://unsplash.com)

5link

6link> :Hero src=https://images.unsplash.com/photo-1540850840617-cae8f6e46284?w=1200&h=600&fit=crop,

7link>       target=mobile

8link>

9link> Photo by [David Severin](https://unsplash.com/@desiderius) on [Unsplash](https://unsplash.com)

Photo by David Severin on Unsplash

Photo by David Severin on Unsplash

linkLeaking Text On Hero Images

It is a cool effect to have text leak upon a hero image. You can replicate this effect via leak attribute:

1link> :Hero src=https://images.unsplash.com/photo-1497005367839-6e852de72767?w=2000&h=600&fit=crop,

2link>       leak=64px,

3link>       mode=light

4link

5link> :Hero src=https://images.unsplash.com/photo-1545376823-0fb35ac6a3e0?w=2000&h=600&fit=crop,

6link>       leak=64px,

7link>       mode=dark

Some text that follows the Hero image, going on top of it now. You need to be careful since the color of the text changes based on dark mode/light mode, so pick a proper image with proper contrast for each mode. Alternatively, you can use the Title component on top of your hero images and make its color invariant towards light mode / dark mode.

Also be careful that it is usually better to use distinct leak values for mobile and desktop.

P.S. the credits for the last photos goes to Arus Cengiz and Hello I'm Nik both from Unsplash as well.