Examples
Default styling
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image
no image
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__middle-left
middle left
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__middle-left
no image middle left
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__middle-right
middle right
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__middle-right
no image middle right
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__top-left
top left
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__top-left
no image top left
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__top-centre
top centre
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__top-centre
no image top centre
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__top-right
top right
boring

Full Height Single Image - 4:3 img on mobile

Button

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

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__bottom-left
bottom left
boring

Full Height Single Image - 4:3 img on mobile

Button

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

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__bottom-centre
bottom centre
boring

Full Height Single Image - 4:3 img on mobile

Button

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

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__bottom-right
bottom right
boring

Full Height Single Image - 4:3 img on mobile

Button

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

Full Height Single Image - 4:3 img on mobile

Button

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  {{modifier_class}} text-align-center">
        <h1 >Full Height Single Image - 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 365