2 files changed, 41 insertions, 0 deletions
diff --git a/packages/website/ts/pages/jobs/list/header_item.tsx b/packages/website/ts/pages/jobs/list/header_item.tsx
new file mode 100644
index 000000000..ac214904c
--- /dev/null
+++ b/packages/website/ts/pages/jobs/list/header_item.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { Text } from 'ts/components/ui/text';
+import { ListItem } from 'ts/pages/jobs/list/list_item';
+import { colors } from 'ts/style/colors';
+
+export interface HeaderItemProps {
+    headerText?: string;
+}
+export const HeaderItem: React.StatelessComponent<HeaderItemProps> = ({ headerText }) => {
+    return (
+        <div className="h2 lg-py4 md-py4 sm-py3">
+            <ListItem>
+                <Text
+                    fontFamily="Roboto Mono"
+                    fontSize="24px"
+                    lineHeight="1.25"
+                    minHeight="1.25em"
+                    fontColor={colors.black}
+                >
+                    {headerText}
+                </Text>
+            </ListItem>
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/list/list_item.tsx b/packages/website/ts/pages/jobs/list/list_item.tsx
new file mode 100644
index 000000000..d7838bc01
--- /dev/null
+++ b/packages/website/ts/pages/jobs/list/list_item.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export interface ListItemProps {
+    bulletColor?: string;
+}
+export const ListItem: React.StatelessComponent<ListItemProps> = ({ bulletColor, children }) => {
+    return (
+        <div className="flex items-center">
+            <svg className="flex-none lg-px2 md-px2 sm-pl2" height="26" width="26">
+                <circle cx="13" cy="13" r="13" fill={bulletColor || 'transparent'} />
+            </svg>
+            <div className="flex-auto px2">{children}</div>
+        </div>
+    );
+};