diff --git a/www/examples/Tile.mdx b/www/examples/Tile.mdx
index 7becff355..12a295977 100644
--- a/www/examples/Tile.mdx
+++ b/www/examples/Tile.mdx
@@ -34,8 +34,8 @@ const Example = () => {
     <div>
       <React.Fragment>
         <Carousel autoplay={false} style={{ width: '55vw' }} dots={false}>
-          {_.map(items, (item) => (
-            <Tile {...item} style={{ paddingRight: 10, width: 220, height: 300 }} />
+          {_.map(items, (item, i) => (
+            <Tile key={i} {...item} style={{ paddingRight: 10, width: 220, height: 300 }} />
           ))}
         </Carousel>
       </React.Fragment>
diff --git a/www/examples/UserListPicker.mdx b/www/examples/UserListPicker.mdx
index fdfe3ede2..1611ef4bc 100644
--- a/www/examples/UserListPicker.mdx
+++ b/www/examples/UserListPicker.mdx
@@ -4,16 +4,17 @@ import DesignNotes from '../containers/DesignNotes.jsx';
 ## User List Picker
 
 ```jsx live=true
-const avatarColor = (user) => (user.avatar ? '' : 'cyan');
+const avatarColor = (user) => (user.status === 'active' ? 'blue' : 'orange');
 const emptySvgSymbol = <SvgSymbol href="./assets/svg-symbols.svg#checklist-incomplete" />;
 const teamMember1 = {
   avatar: '../assets/user-avatar.jpeg',
   givenName: 'John',
   id: 1,
   surname: 'Smith',
+  status: 'active',
 };
-const teamMember2 = { givenName: 'Jane', id: 2, surname: 'Doe' };
-const teamMember3 = { givenName: 'Jack', id: 3, surname: 'White' };
+const teamMember2 = { givenName: 'Jane', id: 2, surname: 'Doe', status: 'active' };
+const teamMember3 = { givenName: 'Jack', id: 3, surname: 'White', status: 'pending' };
 const listPickerItems = [teamMember1, teamMember2, teamMember3];
 const listPickerInitialSelection = [teamMember2];
 const listPickerItemHeaders = {