Hero

<div class="exhibition-hero">
    <figure class="relative no-margin">
        <picture class="exhibition-hero__picture">
            <source media="(min-width: 600px)" sizes="100vw" data-srcset="https://iiif.wellcomecollection.org/image/prismic:221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg/full/160,/0/default.jpg 160w,https://iiif.wellcomecollection.org/image/prismic:221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg/full/180,/0/default.jpg 180w,https://iiif.wellcomecollection.org/image/prismic:221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg/full/282,/0/default.jpg 282w,https://iiif.wellcomecollection.org/image/prismic:221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg/full/320,/0/default.jpg 320w,https://iiif.wellcomecollection.org/image/prismic:221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg/full/420,/0/default.jpg 420w,https://iiif.wellcomecollection.org/image/prismic:221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg/full/600,/0/default.jpg 600w,https://iiif.wellcomecollection.org/image/prismic:221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg/full/880,/0/default.jpg 880w,https://iiif.wellcomecollection.org/image/prismic:221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg/full/960,/0/default.jpg 960w,https://iiif.wellcomecollection.org/image/prismic:221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg/full/1024,/0/default.jpg 1024w,https://iiif.wellcomecollection.org/image/prismic:221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg/full/1338,/0/default.jpg 1338w,https://iiif.wellcomecollection.org/image/prismic:221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg/full/2048,/0/default.jpg 2048w"
            />
            <source media="(min-width: 0)" sizes="100vw" data-srcset="https://iiif.wellcomecollection.org/image/prismic:0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg/full/160,/0/default.jpg 160w,https://iiif.wellcomecollection.org/image/prismic:0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg/full/180,/0/default.jpg 180w,https://iiif.wellcomecollection.org/image/prismic:0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg/full/282,/0/default.jpg 282w,https://iiif.wellcomecollection.org/image/prismic:0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg/full/320,/0/default.jpg 320w,https://iiif.wellcomecollection.org/image/prismic:0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg/full/420,/0/default.jpg 420w,https://iiif.wellcomecollection.org/image/prismic:0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg/full/600,/0/default.jpg 600w,https://iiif.wellcomecollection.org/image/prismic:0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg/full/880,/0/default.jpg 880w,https://iiif.wellcomecollection.org/image/prismic:0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg/full/960,/0/default.jpg 960w,https://iiif.wellcomecollection.org/image/prismic:0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg/full/1024,/0/default.jpg 1024w,https://iiif.wellcomecollection.org/image/prismic:0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg/full/1338,/0/default.jpg 1338w,https://iiif.wellcomecollection.org/image/prismic:0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg/full/2048,/0/default.jpg 2048w"
            />
            <img height="3200" width="3200" class="image lazy-image lazyload" data-src="https://iiif.wellcomecollection.org/image/prismic:0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg/full/3200,/0/default.jpg" alt="Photograph of the Medicine Man exhibition at Wellcome Collection showing a wall of oil paintings with two visitors standing in front."
            />
        </picture>
        <div class="
      tasl--top
      font-LR3-s font-LR2-m
      
      tasl drawer js-show-hide
    " data-track-action="toggle-image-credit" data-track-label="image:https://wellcomecollection.cdn.prismic.io/wellcomecollection/0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg">
            <div class="
        drawer__body js-show-hide-drawer bg-black font-white
        padding-top-s1 padding-bottom-s1 padding-left-s1
        padding-right-s6"><span property="dc:title">Medicine Man exhibition, Benjamin Gilbert.</span> Source: Wellcome Collection. <a rel="license" href="https://creativecommons.org/licenses/by/4.0/">CC BY</a>.</div>
            <button class="tasl__button absolute plain-button js-show-hide-trigger"><span class="tasl__icon tasl__icon--open flex--v-center flex--h-center bg-transparent-black"><div class="icon icon--white" aria-hidden="true"><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" role="img"><title>information</title><svg data-name="Layer 1" viewBox="0 0 26 26"><path class="cls-1" d="M15.25 19.34H14v-7.27a1 1 0 0 0-1-1h-2.25a1 1 0 0 0 0 2H12v6.26h-1.25a1 1 0 0 0 0 2h4.5a1 1 0 1 0 0-2z"></path><circle class="cls-1" cx="13" cy="6.79" r="2.13"></circle></svg></svg></div></span>
                <span
                class="tasl__icon tasl__icon--close flex--v-center flex--h-center bg-transparent-black">
                    <div class="icon icon--white" aria-hidden="true">
                        <canvas class="icon__canvas" height="26" width="26"></canvas>
                        <svg class="icon__svg" role="img">
                            <title>close</title>
                            <svg viewBox="0 0 26 26">
                                <path class="icon__shape" d="M19.7 18.3L14.4 13l5.3-5.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L13 11.6 7.7 6.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l5.3 5.3-5.3 5.3c-.4.4-.4 1 0 1.4s1 .4 1.4 0l5.3-5.3 5.3 5.3c.4.4 1 .4 1.4 0 .4-.4.4-1 0-1.4z"></path>
                            </svg>
                        </svg>
                    </div>
                    </span>
                    </button>
        </div>
    </figure>
    <div class="
      exhibition-hero__copy
      margin-bottom-l10
    ">
        <div class="is-hidden-l is-hidden-xl">
            <div class="wobbly-edge wobbly-edge--white  js-wobbly-edge" data-max-intensity="50" data-number-of-points="5" style="-webkit-clip-path:polygon(0% 100%,,100% 100%);mozclip-path:polygon(0% 100%,,100% 100%);-ms-clip-path:polygon(0% 100%,,100% 100%);-o-clip-path:polygon(0% 100%,,100% 100%);clip-path:polygon(0% 100%,,100% 100%)"></div>
        </div>
        <div class="relative margin-bottom-s3" style="z-index:20">
            <div class="pointer-events-none">
                <a href="#exhibition-content" class="scroll-to-info js-scroll-to-info plain-link flex--v-center flex--h-center flex btn btn--round flush-container-right js-work-media-control pointer-events-all bg-charcoal bg-hover-charcoal border-color-charcoal"
                    data-track-event="{&quot;category&quot;: &quot;component&quot;, &quot;action&quot;: &quot;scroll-to-info:click&quot;, &quot;label&quot;: &quot;scrolled-to-id:exhibition-content&quot;}">
                    <div class="icon icon--white" aria-hidden="true"><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" role="img"><title>scroll to more information</title><svg viewBox="0 0 26 26"><path d="M18.8 10.45a1 1 0 0 0-1.41 0L13 14.87l-4.44-4.42a1 1 0 1 0-1.41 1.41L12.27 17a1 1 0 0 0 1.41 0l5.12-5.12a1 1 0 0 0 0-1.43z"></path></svg></svg>
                    </div>
                </a>
            </div>
        </div>
        <div class="container">
            <div class="grid">
                <div class="grid__cell grid__cell--s12 grid__cell--m10 grid__cell--shift-m1 grid__cell--l12 grid__cell--xl12">
                    <div class="
            bg-white
            inline-block
            exhibition-hero__box
            rounded-diagonal
            padding-top-s4 padding-bottom-s4
            padding-right-l4 padding-left-l4
          ">
                        <div>
                            <h1>Some content for the white box</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
// @flow
import {spacing} from '../../../../utils/classnames';
import Picture from '../../Picture/Picture';
import ScrollToInfo from '../../ScrollToInfo/ScrollToInfo';
import WobblyEdge from '../../WobblyEdge/WobblyEdge';
import Grid from '../../layout/Grid';
import Container from '../../layout/Container';
import type {Picture as PictureProps} from '../../../../model/picture';

type Props = {|
  images: PictureProps[],
  whiteBox: React.Node
|}

const Hero = ({ images, whiteBox }: Props) => (
  <div className='exhibition-hero'>
    <Picture
      images={images}
      extraClasses='exhibition-hero__picture'
      isFull={true} />

    <div className={`
      exhibition-hero__copy
      ${spacing({l: 10}, {margin: ['bottom']})}
    `}>
      <div className='is-hidden-l is-hidden-xl'>
        <WobblyEdge background='white' />
      </div>
      <div className={`relative ${spacing({s: 3}, { margin: ['bottom'] })}`} style={{ zIndex: 20 }}>
        <div className='pointer-events-none'>
          <ScrollToInfo elementId='exhibition-content' extraClasses='bg-charcoal bg-hover-charcoal border-color-charcoal' />
        </div>
      </div>
      <Container>
        <Grid sizes={{s: 12, m: 10, shiftM: 1, l: 12, xl: 12}}>
          <div className={`
            bg-white
            inline-block
            exhibition-hero__box
            rounded-diagonal
            ${spacing({s: 4}, {padding: ['top', 'bottom']})}
            ${spacing({l: 4}, {padding: ['right', 'left']})}
          `}>
            {whiteBox}
          </div>
        </Grid>
      </Container>
    </div>
  </div>
);

export default Hero;
{
  "images": [
    {
      "type": "picture",
      "contentUrl": "https://wellcomecollection.cdn.prismic.io/wellcomecollection/221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg",
      "width": 3200,
      "height": 1500,
      "alt": "Photograph of the Medicine Man exhibition at Wellcome Collection showing a wall of oil paintings with two visitors standing in front.",
      "title": "Medicine Man exhibition",
      "author": "Benjamin Gilbert",
      "source": {
        "name": "Wellcome Collection",
        "link": null
      },
      "license": "CC-BY",
      "copyright": {
        "holder": null,
        "link": null
      },
      "minWidth": "600px"
    },
    {
      "type": "picture",
      "contentUrl": "https://wellcomecollection.cdn.prismic.io/wellcomecollection/0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg",
      "width": 3200,
      "height": 3200,
      "alt": "Photograph of the Medicine Man exhibition at Wellcome Collection showing a wall of oil paintings with two visitors standing in front.",
      "title": "Medicine Man exhibition",
      "author": "Benjamin Gilbert",
      "source": {
        "name": "Wellcome Collection",
        "link": null
      },
      "license": "CC-BY",
      "copyright": {
        "holder": null,
        "link": null
      },
      "minWidth": "0"
    }
  ],
  "whiteBox": {
    "type": "div",
    "key": null,
    "ref": null,
    "props": {
      "children": {
        "type": "h1",
        "key": null,
        "ref": null,
        "props": {
          "children": "Some content for the white box"
        },
        "_owner": null,
        "_store": {}
      }
    },
    "_owner": null,
    "_store": {}
  }
}

There are no notes for this item.