github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/website/components/comparison-callouts/index.jsx (about)

     1  import s from './style.module.css'
     2  import Image from '@hashicorp/react-image'
     3  import Button from '@hashicorp/react-button'
     4  
     5  export default function ComparisonCallouts({ heading, details, items }) {
     6    return (
     7      <div className={s.comparisonCallouts}>
     8        <div className={s.content}>
     9          <div className={s.description}>
    10            <h2 className="g-type-display-2">{heading}</h2>
    11            <div className={s.details}>{details}</div>
    12          </div>
    13  
    14          <div className={s.comparisonItems}>
    15            {items.map((item) => (
    16              <ComparisonItem key={item.title} {...item} />
    17            ))}
    18          </div>
    19        </div>
    20      </div>
    21    )
    22  }
    23  
    24  function ComparisonItem({ imageUrl, title, description, link }) {
    25    return (
    26      <div className={s.comparisonItem}>
    27        <Image url={imageUrl} />
    28        <h4 className="g-type-display-4">{title}</h4>
    29        <p className="g-type-body">{description}</p>
    30        <Button
    31          url={link.url}
    32          title={link.text}
    33          linkType={link.type}
    34          theme={{ variant: 'tertiary', brand: 'nomad' }}
    35        />
    36      </div>
    37    )
    38  }