<div class="row" style="background-image:url(https://wellcomecollection.cdn.prismic.io/wellcomecollection%2F9154df28-e179-47c0-8d41-db0b74969153_wc+brand+backgrounds+2_pattern+2+colour+1.svg);background-size:150%">
    <div class="container">
        <div class="grid padding-top-s5 padding-top-m7">
            <div class="
              grid__cell grid__cell--s12 grid__cell--m10 grid__cell--shift-m1 grid__cell--l8 grid__cell--shift-l2 grid__cell--xl8 grid__cell--shift-xl2
              padding-bottom-s1
            ">
                <h1 class="
              h1 inline-block no-margin
              
                bg-white
                padding-left-s2 padding-right-s2
                padding-bottom-s1 padding-top-s1
              
            "></h1>
            </div>
        </div>
    </div>
</div>
// @flow
import {Fragment} from 'react';
import {spacing, grid, font} from '../../../../utils/classnames';
import TexturedBackground from '../../Templates/BasicPage/TexturedBackground';
import type {Node} from 'react';
import type {CaptionedImage} from '../../Images/Images';
import type WobblyBackground from '../../Templates/BasicPage/WobblyBackground';
import type VideoEmbed from '../../VideoEmbed/VideoEmbed';

type Props = {|
  title: string,
  Background: ?(WobblyBackground | CaptionedImage),
  TagBar: ?Node, // potentially make this only take Aync | Tags?
  DateInfo: ?Node,
  InfoBar: ?Node,
  Description: ?Node,
  FeaturedMedia: ?(CaptionedImage | VideoEmbed)
|}

const backgroundTexture = 'https://wellcomecollection.cdn.prismic.io/wellcomecollection%2F9154df28-e179-47c0-8d41-db0b74969153_wc+brand+backgrounds+2_pattern+2+colour+1.svg';
const BasicHeader = ({
  title,
  Background,
  TagBar,
  DateInfo,
  Description,
  InfoBar,
  FeaturedMedia
}: Props) => {
  const BackgroundComponent = Background ||
    (FeaturedMedia ? TexturedBackground({backgroundTexture}) : null);

  return (
    <Fragment>
      {BackgroundComponent}
      <div className='row' style={{
        backgroundImage: BackgroundComponent ? null : `url(${backgroundTexture})`,
        backgroundSize: BackgroundComponent ? null : '150%'
      }}>
        <div className={`container`}>
          <div className={`grid ${spacing({s: 5, m: 7}, {padding: ['top']})}`}>
            {TagBar &&
              <div className={`
                ${spacing({s: 1}, {padding: ['top']})}
                ${grid({s: 12, m: 10, shiftM: 1, l: 8, shiftL: 2, xl: 8, shiftXL: 2})}
              `}>
                {TagBar}
              </div>
            }
            <div className={`
              ${grid({s: 12, m: 10, shiftM: 1, l: 8, shiftL: 2, xl: 8, shiftXL: 2})}
              ${spacing({s: 1}, {padding: ['bottom']})}
            `}>
              <h1 className={`
              h1 inline-block no-margin
              ${Background ? '' : `
                bg-white
                ${spacing({ s: 2 }, { padding: ['left', 'right'] })}
                ${spacing({ s: 1 }, { padding: ['bottom', 'top'] })}
              `}
            `}>{title}</h1>

              {DateInfo &&
                <div className={`${font({s: 'HNL3'})} ${spacing({s: 3}, {margin: ['top']})}`}>
                  {DateInfo}
                </div>
              }

              {Description &&
                <div className={`${font({s: 'HNL4'})} ${spacing({s: 3}, {margin: ['top']})} first-para-no-margin`}>
                  {Description}
                </div>
              }

              {InfoBar &&
                <div className={`${font({s: 'HNL4'})} ${spacing({s: 3}, {margin: ['top', 'bottom']})}`}>
                  {InfoBar}
                </div>
              }

              {FeaturedMedia &&
                <div className={`${spacing({ s: 2 }, { margin: ['top'] })} relative`} key={'rasjhd'}>
                  <Fragment>{FeaturedMedia}</Fragment>
                </div>
              }
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
};

export default BasicHeader;
/* No context defined for this component. */
  • Handle: @basicheader
  • Preview:
  • Filesystem Path: ../common/views/components/PageHeaders/BasicHeader/BasicHeader.js

There are no notes for this item.