daily pastebin goal
23%
SHARE
TWEET

Untitled

a guest Jan 23rd, 2019 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react'
  2. import styled, { css } from 'styled-components'
  3.  
  4. const baseStyle = css`
  5.     margin-bottom: ${props => props.noMargin && '0'};
  6.     color: #202020;
  7.     font-family: 'Poppins', sans-serif;
  8.     font-weight: 600;
  9.     margin-top: 0;
  10.     text-align: ${props => {
  11.         if (props.center) return 'center'
  12.         if (props.right) return 'right'
  13.         return 'left'
  14.     }};
  15.  
  16.     max-width: 100%;
  17. `
  18.  
  19. const HeadingOne = styled.h1`
  20.     font-size: 42px;
  21.     font-weight: bold;
  22.     margin-bottom: 25px;
  23.     ${baseStyle};
  24.  
  25.     @media (max-width: 480px) {
  26.         font-size: 40px;
  27.     }
  28. `
  29.  
  30. const HeadingTwo = styled.h2`
  31.     font-size: 36px;
  32.     font-weight: bold;
  33.     margin-bottom: 20px;
  34.     ${baseStyle};
  35. `
  36.  
  37. const HeadingThree = styled.h3`
  38.     font-size: 28px;
  39.     font-weight: bold;
  40.     margin-bottom: 15px;
  41.     ${baseStyle};
  42. `
  43.  
  44. const HeadingFour = styled.h4`
  45.     font-size: 22px;
  46.     font-weight: bold;
  47.     margin-bottom: 10px;
  48.     ${baseStyle};
  49. `
  50.  
  51. const HeadingFive = styled.h5`
  52.     font-size: 18px;
  53.     font-weight: bold;
  54.     margin-bottom: 5px;
  55.     ${baseStyle};
  56. `
  57.  
  58. const Heading = ({ h2, h3, h4, h5, noMargin, right, center, ...props }) => {
  59.     if (h2) return <HeadingTwo noMargin={noMargin} right={right} center={center} {...props} />
  60.     if (h3) return <HeadingThree noMargin={noMargin} right={right} center={center} {...props} />
  61.     if (h4) return <HeadingFour noMargin={noMargin} right={right} center={center} {...props} />
  62.     if (h5) return <HeadingFive noMargin={noMargin} right={right} center={center} {...props} />
  63.     return <HeadingOne noMargin={noMargin} right={right} center={center} {...props} />
  64. }
  65.  
  66. export default Heading
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top