Full Height Single Image

.paragraph--full-height-single-image--no-image - no image .fhsi__middle-left - middle left .paragraph--full-height-single-image--no-image.fhsi__middle-left - no image middle left .paragraph--full-height-single-image--no-image.fhsi__middle-left - no image, middle left .fhsi__middle-right - middle right .paragraph--full-height-single-image--no-image.fhsi__middle-right - no image, middle right .fhsi__top-left - top left .paragraph--full-height-single-image--no-image.fhsi__top-left - no image top left .paragraph--full-height-single-image--no-image.fhsi__top-left - no image, top left .fhsi__top-centre - top centre .paragraph--full-height-single-image--no-image.fhsi__top-centre - no image, top centre .fhsi__top-right - top right .paragraph--full-height-single-image--no-image.fhsi__top-right - no image top right .fhsi__bottom-left - bottom left .paragraph--full-height-single-image--no-image.fhsi__bottom-left - no image bottom left .fhsi__bottom-centre - bottom centre .paragraph--full-height-single-image--no-image.fhsi__bottom-centre - no image bottom centre .fhsi__bottom-right - bottom right .paragraph--full-height-single-image--no-image.fhsi__bottom-right - no image bottom right

Examples

Default styling

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__top-right

no image, top right

boring

FHSI - 4:3 img on mobile

.fhsi__bottom-left

bottom left

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__bottom-left

no image, bottom left

boring

FHSI - 4:3 img on mobile

.fhsi__bottom-centre

bottom centre

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__bottom-centre

no image, bottom centre

boring

FHSI - 4:3 img on mobile

.fhsi__bottom-right

bottom right

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__bottom-right

no image, bottom right

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__fifty-vh

no image, 50vh variant

boring

FHSI - 4:3 img on mobile

.fhsi__middle-left.fhsi__fifty-vh

middle left, 50vh variant

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__middle-left.fhsi__fifty-vh

no image, middle left, 50vh variant

boring

FHSI - 4:3 img on mobile

.fhsi__middle-right.fhsi__fifty-vh

middle right, 50vh variant

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__middle-right.fhsi__fifty-vh

no image, middle right, 50vh variant

boring

FHSI - 4:3 img on mobile

.fhsi__top-left.fhsi__fifty-vh

top left, 50vh variant

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__top-left.fhsi__fifty-vh

no image, top left, 50vh variant

boring

FHSI - 4:3 img on mobile

.fhsi__top-centre.fhsi__fifty-vh

top centre, 50vh variant

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__top-centre.fhsi__fifty-vh

no image, top centre, 50vh variant

boring

FHSI - 4:3 img on mobile

.fhsi__top-right.fhsi__fifty-vh

top right, 50vh variant

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__top-right.fhsi__fifty-vh

no image, top right, 50vh variant

boring

FHSI - 4:3 img on mobile

.fhsi__bottom-left.fhsi__fifty-vh

bottom left, 50vh variant

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__bottom-left.fhsi__fifty-vh

no image, bottom left, 50vh variant

boring

FHSI - 4:3 img on mobile

.fhsi__bottom-centre.fhsi__fifty-vh

bottom centre, 50vh variant

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__bottom-centre.fhsi__fifty-vh

no image, bottom centre, 50vh variant

boring

FHSI - 4:3 img on mobile

.fhsi__bottom-right.fhsi__fifty-vh

bottom right, 50vh variant

boring

FHSI - 4:3 img on mobile

.paragraph--full-height-single-image--no-image.fhsi__bottom-right.fhsi__fifty-vh

no image, bottom right, 50vh variant

boring

FHSI - 4:3 img on mobile

Markup: components/full-height-single-image/full-height-single-image.twig

<section class="paragraph--full-height-single-image {{modifier_class}} bg--purple">
    <picture>
        <source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 1024px)" type="image/jpeg"/>
        <source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 740px)" type="image/jpeg"/>
        <source srcset="kss-assets/images/4-3-img.jpg" media="(min-width: 0px)" type="image/jpeg"/>
        <img src="kss-assets/images/16-9-img.jpg" alt="boring" typeof="foaf:Image" />
    </picture>
    <div class="fhsi__text-wrapper text-align-center">
        <h1>FHSI - 4:3 img on mobile</h1>
        <p><a class="btn btn--white" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Button</a></p>
    </div>
</section>

Source: _cr19-styleguide.scss, line 366