How to use @bbc/gel-foundations - 10 common examples

import {
  GEL_SPACING_TRPL,
  GEL_SPACING_QUAD,
} from '@bbc/gel-foundations/spacings';
import { C_PEBBLE } from '@bbc/psammead-styles/colours';
import { PlainTitle, LinkTitle } from './titles';

const Bar = styled.div`
  border-top: 0.0625rem solid ${C_PEBBLE};
  z-index: -1;

  @media screen and (-ms-high-contrast: active) {
    border-color: windowText;
  }

  ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
    position: absolute;
    left: 0;
    right: 0;

    /* Placing bar at the vertical midpoint of the section title */
    top: ${({ script }) =>
      0.5 + script.doublePica.groupD.lineHeight / 2 / 16}rem;
  }
`;

const SectionLabelWrapper = styled.div`
  position: relative;

  margin-top: ${GEL_SPACING_QUAD};

  ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {

const top = script => `
  // place at middle of text line height
  top: ${halfLineHeightRem(script.doublePica.groupA)}rem;

  ${MEDIA_QUERY_TYPOGRAPHY.SMART_PHONE_ONLY} {
    top: ${halfLineHeightRem(script.doublePica.groupB)}rem;
  }

  ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
    top: ${halfLineHeightRem(script.doublePica.groupD)}rem;
  }
`;

}
`;

SectionLabelLink.propTypes = {
  href: string.isRequired,
  labelId: string.isRequired,
};

const FlexContainer = styled.span`
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  min-height: ${minClickableHeightRem}rem;

  align-items: baseline;
  ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
    /* Allows the IndexLinkCta to take up extra vertical space and unsures bar is hidden
       with very long section titles over 600px */
    align-items: stretch;
  }
`;

const FlexTextContainer = styled(FlexContainer).attrs({
  role: 'text',
})``;

const titleMargins = `
  margin: 1rem 0;

  ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
    margin: 0;
  }

import {
  GEL_SPACING_TRPL,
  GEL_SPACING_QUAD,
} from '@bbc/gel-foundations/spacings';
import { getCanon, getTrafalgar } from '@bbc/gel-foundations/typography';
import { MEDIA_QUERY_TYPOGRAPHY } from '@bbc/gel-foundations/breakpoints';
import { scriptPropType } from '@bbc/gel-foundations/prop-types';
import { getSansBold, getSerifMedium } from '@bbc/psammead-styles/font-styles';

export const Headline = styled.h1`
  ${({ script }) => script && getCanon(script)};
  ${({ service }) => getSerifMedium(service)}
  color: ${C_SHADOW};
  margin: 0; /* Reset */
  padding: ${GEL_SPACING_QUAD} 0;
  ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
    padding: 2.5rem 0;
  }
`;

export const SubHeading = styled.h2.attrs(() => ({
  tabIndex: '-1',
}))`
  ${({ script }) => script && getTrafalgar(script)};
  ${({ service }) => getSansBold(service)}
  color: ${C_SHADOW};
  margin: 0; /* Reset */
  padding: ${GEL_SPACING_TRPL} 0;
  ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
    padding-top: ${GEL_SPACING_QUAD};
  }
`;

  ${({ script }) => script && getFoolscap(script)};
  margin: 0; /* Reset */

const top = script => `
  // place at middle of text line height
  top: ${halfLineHeightRem(script.doublePica.groupA)}rem;

  ${MEDIA_QUERY_TYPOGRAPHY.SMART_PHONE_ONLY} {
    top: ${halfLineHeightRem(script.doublePica.groupB)}rem;
  }

  ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
    top: ${halfLineHeightRem(script.doublePica.groupD)}rem;
  }
`;

${({ script, promoHasImage }) =>
      !promoHasImage && script && getPica(script)}
  }

  ${({ script }) => script && getPica(script)};
  ${({ service }) => service && getSerifMedium(service)};

  ${({ script }) => script && getPica(script)};
  color: ${C_WHITE};

const Card = styled.li`
    background-color: ${C_WHITE};
    display: inline-block;
    width: calc(20% - 4 * ${GEL_SPACING});
    margin: 0 ${GEL_SPACING} ${GEL_SPACING_DBL} ${GEL_SPACING};
  `;
  const CardLink = styled.a`
    text-decoration: none;
  `;
  const CardHeadline = styled.h4`
    color: ${C_EBON};
    ${getSerifMedium(service)}
    ${getPica(script)}
  `;
  const TopicLink = styled(InlineLink)`
    ${getPica(script)};
    ${getSansRegular(service)}
    color: ${C_EBON};
    margin: ${GEL_SPACING_DBL}
`;
  const OnwardJourneysHeading = styled.h2`
    ${getDoublePica(script)};
    ${getSansRegular(service)};
    color: ${C_EBON};
    margin: 0 ${GEL_SPACING_DBL};
  `;

  return (
    
      
        More from the BBC