Full Height Single Image

Toggle example guides Toggle HTML markup

.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

Button

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

FHSI - 4:3 img on mobile

Button

.fhsi__bottom-left
bottom left
boring

FHSI - 4:3 img on mobile

Button

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

FHSI - 4:3 img on mobile

Button

.fhsi__bottom-centre
bottom centre
boring

FHSI - 4:3 img on mobile

Button

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

FHSI - 4:3 img on mobile

Button

.fhsi__bottom-right
bottom right
boring

FHSI - 4:3 img on mobile

Button

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

FHSI - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__fifty-vh
no image, 50vh variant
boring

FHSI - 4:3 img on mobile

Button

.fhsi__middle-left.fhsi__fifty-vh
middle left, 50vh variant
boring

FHSI - 4:3 img on mobile

Button

.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

Button

.fhsi__middle-right.fhsi__fifty-vh
middle right, 50vh variant
boring

FHSI - 4:3 img on mobile

Button

.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

Button

.fhsi__top-left.fhsi__fifty-vh
top left, 50vh variant
boring

FHSI - 4:3 img on mobile

Button

.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

Button

.fhsi__top-centre.fhsi__fifty-vh
top centre, 50vh variant
boring

FHSI - 4:3 img on mobile

Button

.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

Button

.fhsi__top-right.fhsi__fifty-vh
top right, 50vh variant
boring

FHSI - 4:3 img on mobile

Button

.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

Button

.fhsi__bottom-left.fhsi__fifty-vh
bottom left, 50vh variant
boring

FHSI - 4:3 img on mobile

Button

.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

Button

.fhsi__bottom-centre.fhsi__fifty-vh
bottom centre, 50vh variant
boring

FHSI - 4:3 img on mobile

Button

.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

Button

.fhsi__bottom-right.fhsi__fifty-vh
bottom right, 50vh variant
boring

FHSI - 4:3 img on mobile

Button

.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

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 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