1 files changed, 39 insertions, 8 deletions
diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
index 30dd126d1..a00290418 100644
--- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx
+++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
@@ -2,20 +2,30 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
-
+export type BulletedItemInfo = BulletedItemProps;
 export interface BulletedItemListProps {
-    headerText: string;
-    bulletedItems: BulletedItemProps[];
+    headerText?: string;
+    bulletedItemInfos: BulletedItemInfo[];
 }
 export const BulletedItemList = (props: BulletedItemListProps) => {
     return (
         <div className="mx-auto max-width-4">
-            <div className="h2 lg-py4 md-py4 sm-py3" style={{ paddingLeft: 90, fontFamily: 'Roboto Mono' }}>
-                {props.headerText}
-            </div>
+            {!_.isUndefined(props.headerText) && (
+                <div
+                    className="h2 lg-py4 md-py4 sm-py3"
+                    style={{
+                        paddingLeft: 90,
+                        fontFamily: 'Roboto Mono',
+                        minHeight: '1.25em',
+                        lineHeight: 1.25,
+                    }}
+                >
+                    {props.headerText}
+                </div>
+            )}
+
             <div className="px2">
-                {_.map(props.bulletedItems, bulletedItemProps => {
+                {_.map(props.bulletedItemInfos, bulletedItemProps => {
                     return (
                         <BulletedItem
                             key={bulletedItemProps.title}
@@ -29,3 +39,24 @@ export const BulletedItemList = (props: BulletedItemListProps) => {
         </div>
     );
 };
+
+interface BulletedItemProps {
+    bulletColor: string;
+    title: string;
+    description: string;
+    height?: number;
+}
+const BulletedItem = (props: BulletedItemProps) => {
+    const minHeight = props.height || 150;
+    return (
+        <div className="flex" style={{ minHeight }}>
+            <svg className="flex-none px2" height="26" width="26">
+                <circle cx="13" cy="13" r="13" fill={props.bulletColor} />
+            </svg>
+            <div className="flex-auto px2">
+                <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div>
+                <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div>
+            </div>
+        </div>
+    );
+};