@navinc/base-react-components/src/author-card.js

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'

import Header from './header.js'
import Copy from './copy.js'

const AuthorContainer = styled.div`
  display: grid;
  grid-gap: 24px;
  align-items: center;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  padding: 32px 40px;

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    grid-template-columns: 25% 1fr;
  }
`

const AuthorDetails = styled.div`
  display: grid;
  grid-gap: 8px;
  text-align: center;
  justify-items: center;
`

const AuthorImg = styled.img`
  border-radius: 50%;
  max-width: 100px;
`

export default ({ description, img, imgAlt, name, title }) => (
  <AuthorContainer>
    <AuthorDetails>
      <Header>ABOUT AUTHOR</Header>
      <AuthorImg src={img} alt={imgAlt} />
      <Header size="sm">{name}</Header>
      <Copy light>{title}</Copy>
    </AuthorDetails>
    <Copy>{description}</Copy>
  </AuthorContainer>
)