diff --git a/data/components.yml b/data/components.yml
index 4b35525d..9fe7c367 100644
--- a/data/components.yml
+++ b/data/components.yml
@@ -1,11 +1,17 @@
-- name: 'Hello'
- description: 'Hello'
+- name: 'keeper-contracts'
+ description: '💧 Integration of TCRs, CPM and Ocean Tokens in Solidity'
links:
- - name: 'Hello'
- url: '#'
+ - name: 'GitHub'
+ url: 'https://github.com/oceanprotocol/keeper-contracts'
-- name: 'Hello'
- description: 'Hello'
+- name: 'aquarius'
+ description: '🐋 Ocean Metadata API'
links:
- - name: 'Hello'
- url: '#'
+ - name: 'GitHub'
+ url: 'https://github.com/oceanprotocol/aquarius'
+
+- name: 'pleuston'
+ description: '🦄 Web app for consumers to explore, download, and publish data assets.'
+ links:
+ - name: 'GitHub'
+ url: 'https://github.com/oceanprotocol/pleuston'
diff --git a/src/components/Components.jsx b/src/components/Components.jsx
index 7903ea4b..01028fff 100644
--- a/src/components/Components.jsx
+++ b/src/components/Components.jsx
@@ -47,35 +47,50 @@ const Components = () => (
return (
-
-
- Core Components
-
-
-
- {components.map(({ node }) => (
-
- ))}
-
+
-
-
Libraries
+
+
+
+ Core Components
+
-
- {components.map(({ node }) => (
-
- ))}
+
+ {components.map(({ node }) => (
+
+ ))}
+
+
+
+
+
+ Libraries
+
+
+
+ {components.map(({ node }) => (
+
+ ))}
+
diff --git a/src/components/Components.module.scss b/src/components/Components.module.scss
index 03c7d5a2..81e74a5e 100644
--- a/src/components/Components.module.scss
+++ b/src/components/Components.module.scss
@@ -2,7 +2,15 @@
.components {
margin-top: $spacer * 2;
+}
+.quickrun {
+ padding-top: $spacer * 2;
+ padding-bottom: $spacer * 2;
+ text-align: center;
+}
+
+.componentsLists {
@media (min-width: $break-point--medium) {
display: flex;
flex-wrap: wrap;
@@ -30,11 +38,17 @@
}
.component {
+ padding: $spacer / 2;
+ border: 1px solid $brand-grey-lighter;
+ border-radius: $border-radius;
+ margin-bottom: 5%;
+
@media (min-width: $break-point--small) {
- flex: 0 0 45%;
+ flex: 0 0 100%;
}
}
.componentName {
font-size: $font-size-large;
+ margin-top: 0;
}