1 files changed, 35 insertions, 3 deletions
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
index 45bbf950f..abacafdba 100644
--- a/packages/website/ts/pages/jobs/values.tsx
+++ b/packages/website/ts/pages/jobs/values.tsx
@@ -2,9 +2,10 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { HeaderItem } from 'ts/pages/jobs/list/header_item';
+import { ListItem } from 'ts/pages/jobs/list/list_item';
 
-const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [
+const VALUE_ITEM_PROPS_LIST: ValueItemProps[] = [
     {
         bulletColor: '#6FCF97',
         title: 'Ethics/Doing the right thing',
@@ -22,4 +23,35 @@ const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [
     },
 ];
 
-export const Values = () => <BulletedItemList headerText="Our Values" bulletedItemInfos={BULLETED_ITEM_INFOS} />;
+const HEADER_TEXT = 'Our Values';
+const VALUE_ITEM_MIN_HEIGHT = 150;
+
+export const Values = () => {
+    return (
+        <div className="mx-auto max-width-4">
+            <HeaderItem headerText={HEADER_TEXT} />
+            {_.map(VALUE_ITEM_PROPS_LIST, valueItemProps => React.createElement(ValueItem, valueItemProps))}
+        </div>
+    );
+};
+
+interface ValueItemProps {
+    bulletColor: string;
+    title: string;
+    description: string;
+}
+
+export const ValueItem: React.StatelessComponent<ValueItemProps> = ({ bulletColor, title, description }) => {
+    return (
+        <div style={{ minHeight: VALUE_ITEM_MIN_HEIGHT }}>
+            <ListItem bulletColor={bulletColor}>
+                <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div>
+            </ListItem>
+            <ListItem>
+                <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}>
+                    {description}
+                </div>
+            </ListItem>
+        </div>
+    );
+};