@kiwicom/orbit-components/es/Card/CardHeader/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

import * as React from "react";
import styled from "styled-components";

import defaultTokens from "../../defaultTokens";
import Heading from "../../Heading";
import Text from "../../Text";

export const StyledCardHeader = styled.div.withConfig({
  displayName: "CardHeader__StyledCardHeader"
})(["position:relative;width:100%;padding:", ";box-sizing:border-box;color:", ";"], ({ theme }) => theme.orbit.spaceLarge, ({ theme }) => theme.orbit.colorHeading);

StyledCardHeader.defaultProps = {
  theme: defaultTokens
};

const StyledHeadingWrapper = styled.div.withConfig({
  displayName: "CardHeader__StyledHeadingWrapper"
})(["display:flex;"]);

const StyledSubTitle = styled.div.withConfig({
  displayName: "CardHeader__StyledSubTitle"
})(["text-align:center;margin-top:", ";"], ({ theme }) => theme.orbit.spaceXSmall);

StyledSubTitle.defaultProps = {
  theme: defaultTokens
};

const StyledIcon = styled.div.withConfig({
  displayName: "CardHeader__StyledIcon"
})(["color:", ";display:flex;align-items:center;margin-right:", ";"], ({ theme }) => theme.orbit.colorHeading, ({ theme }) => theme.orbit.spaceXSmall);

StyledIcon.defaultProps = {
  theme: defaultTokens
};

const CardHeader = ({ icon, title, subTitle, dataTest }) => React.createElement(
  StyledCardHeader,
  { "data-test": dataTest },
  React.createElement(
    StyledHeadingWrapper,
    null,
    icon && React.createElement(
      StyledIcon,
      null,
      icon
    ),
    React.createElement(
      Heading,
      { type: "title2", element: "h2" },
      title
    )
  ),
  subTitle && React.createElement(
    StyledSubTitle,
    null,
    React.createElement(
      Text,
      null,
      subTitle
    )
  )
);

export default CardHeader;