tabs

css/sass/_dataset-nodes.scss

@@ -0,0 +1,14 @@
+.citation-block {
+  margin-bottom: 1rem;
+  @extend .feature;
+  .icon {
+    font-size: 6rem;
+    padding-right: .5rem;
+    border-right: 1px solid #ddd;
+  }
+  display: flex;
+  padding: 1rem;
+  .data-citation {
+    padding-left: 1rem;
+  }
+}

css/sass/style.scss

@@ -21,6 +21,7 @@ $modularscale: (
 @import 'components';
 @import 'shortcodes';
 @import 'responsive';
+@import 'dataset-nodes';
 @import 'search';
 .slider-image {
   margin-top: 4rem;

css/style.css

@@ -986,7 +986,7 @@ button,
   border: 6px solid var(--upei-red);
 }
 
-.feature h3 {
+.feature h3, .citation-block h3 {
   color: var(--upei-green);
 }
 
@@ -1056,7 +1056,7 @@ button,
   gap: 1rem;
 }
 
-.feature {
+.feature, .citation-block {
   background-color: #ffffff;
   padding: 1rem;
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
@@ -1066,7 +1066,7 @@ button,
   backface-visibility: hidden;
 }
 
-.feature:hover {
+.feature:hover, .citation-block:hover {
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
@@ -1090,13 +1090,13 @@ button,
   box-shadow: 0 0 10px 2px #ffffff;
 }
 
-.feature:hover .feature-icon {
+.feature:hover .feature-icon, .citation-block:hover .feature-icon {
   background-color: #ffffff;
   -webkit-box-shadow: 0 0 10px 2px var(--secondary);
   box-shadow: 0 0 10px 2px var(--secondary);
 }
 
-.feature .link-button {
+.feature .link-button, .citation-block .link-button {
   display: inline-block;
 }
 
@@ -1199,7 +1199,7 @@ button,
     z-index: -1;
     transform: rotate(-5deg);
   }
-  .feature {
+  .feature, .citation-block {
     padding: 2rem;
   }
 }
@@ -1251,6 +1251,20 @@ button,
     max-height: 90px;
   }
 }
+.citation-block {
+  margin-bottom: 1rem;
+  display: flex;
+  padding: 1rem;
+}
+.citation-block .icon {
+  font-size: 6rem;
+  padding-right: 0.5rem;
+  border-right: 1px solid #ddd;
+}
+.citation-block .data-citation {
+  padding-left: 1rem;
+}
+
 .search-results ul {
   list-style: none;
   padding: 0;