aboutsummaryrefslogtreecommitdiffstats
path: root/components/tile
diff options
context:
space:
mode:
Diffstat (limited to 'components/tile')
-rw-r--r--components/tile/_tile.scss172
-rw-r--r--components/tile/tile-without-footer.html14
-rw-r--r--components/tile/vendor-tile.html26
-rw-r--r--components/tile/vfc-tile.html17
-rw-r--r--components/tile/vlm-tile.html22
-rw-r--r--components/tile/vsp-tile.html17
6 files changed, 268 insertions, 0 deletions
diff --git a/components/tile/_tile.scss b/components/tile/_tile.scss
new file mode 100644
index 0000000..80629cf
--- /dev/null
+++ b/components/tile/_tile.scss
@@ -0,0 +1,172 @@
+.sdc-tile {
+ $tile-full-width: 204px;
+ $tile-full-height: 204px;
+ $tile-padding: 10px;
+
+ $header-height: $body-font-1;
+ $footer-height: 23px;
+ $content-height: 100%;
+
+ width: $tile-full-width;
+ height: $tile-full-height;
+
+ padding: $tile-padding;
+ border: 1px solid $silver;
+ @include border-radius(2px);
+ @include box-sizing;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ position: relative;
+ cursor: pointer;
+ user-select: none;
+
+ background: $white;
+ color: $text-black;
+ fill: $dark-gray;
+ transition: box-shadow 0.3s ease-in-out;
+ @include body-3;
+ @include box-shadow(0 1px 4px 0 rgba($text-black, 0.06));
+
+ &:hover {
+ border-color: $light-gray;
+ @include box-shadow( 0 10px 30px 0 rgba($text-black, 0.25));
+ }
+
+ .blue {
+ color: $blue;
+ fill: $blue;
+ }
+
+ .purple {
+ color: $purple;
+ fill: $purple;
+ }
+
+ .centered {
+ &.sdc-tile-footer, .sdc-tile-info-line {
+ text-align: center;
+ }
+ }
+
+ .sdc-tile-header {
+ height: 1.1em;
+ line-height: 1em;
+ @include ellipsis($display: block);
+
+ font-size: $body-font-1;
+ text-transform: uppercase;
+ }
+
+ .sdc-tile-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: $content-height;
+
+ .sdc-tile-content-icon {
+ margin-top: 27px;
+ text-align: center;
+
+ svg {
+ width: 50px;
+ height: 50px;
+
+ &.__vsp {
+ width: 60px;
+ height: 40px;
+ }
+ &.__vlm {
+ width: 45px;
+ height: 53px;
+ }
+ &.__vendor {
+ width: 53px;
+ height: 47px;
+ }
+ }
+ }
+
+ .sdc-tile-content-info {
+ display: flex;
+ flex-direction: column;
+
+ .sdc-tile-info-line {
+ text-transform: capitalize;
+ @include ellipsis($display: inline-block);
+
+ button {
+ height: 1.67em;
+ width: initial;
+ margin-bottom: 5px;
+ margin-top: 1px;
+ padding: 0 8px;
+ font-size: inherit;
+ }
+ &.supertitle {
+ height: 1.1em;
+ line-height: 1.2;
+ color: $gray;
+ }
+ &.title {
+ height: 1.6em;
+ line-height: 1.8;
+ color: $text-black;
+ @include heading-5;
+ }
+ &.subtitle {
+ height: 1.5em;
+ line-height: 1.6;
+ color: $dark-gray;
+ }
+ &:last-child {
+ margin-bottom: 4px;
+ }
+ }
+ }
+ }
+
+ .sdc-tile-footer {
+ height: $footer-height;
+ @include box-sizing;
+
+ border-top: 1px solid $silver;
+ padding-top: 8px;
+
+ color: $dark-gray;
+ fill: $dark-gray;
+ text-transform: capitalize;
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .sdc-tile-footer-cell {
+ &:first-child {
+ @include ellipsis;
+ }
+ svg{
+ width: 20px;
+ height: 12px;
+ }
+ button {
+ width: initial;
+ height: initial;
+ @include body-2;
+
+ .svg-icon-wrapper {
+ .svg-icon-label {
+ font-size: inherit;
+ }
+ svg {
+ width: 9px;
+ height: 9px;
+ }
+ }
+ }
+ }
+
+ }
+}
diff --git a/components/tile/tile-without-footer.html b/components/tile/tile-without-footer.html
new file mode 100644
index 0000000..514a19e
--- /dev/null
+++ b/components/tile/tile-without-footer.html
@@ -0,0 +1,14 @@
+<div class="sdc-tile">
+ <div class="sdc-tile-header blue">Header</div>
+ <div class="sdc-tile-content">
+ <div class="sdc-tile-content-icon blue">
+ <div class="svg-icon-wrapper">
+ <!-- insert SVG -->
+ </div>
+ </div>
+ <div class="sdc-tile-content-info">
+ <div class="sdc-tile-info-line supertitle">Supertitle</div>
+ <div class="sdc-tile-info-line title">Title</div>
+ </div>
+ </div>
+</div>
diff --git a/components/tile/vendor-tile.html b/components/tile/vendor-tile.html
new file mode 100644
index 0000000..ede3fbf
--- /dev/null
+++ b/components/tile/vendor-tile.html
@@ -0,0 +1,26 @@
+<div class="sdc-tile">
+ <div class="sdc-tile-header"></div>
+ <div class="sdc-tile-content">
+ <div class="sdc-tile-content-icon dark-gray">
+ <div class="svg-icon-wrapper">
+ <!-- insert SVG -->
+ </div>
+ </div>
+ <div class="sdc-tile-content-info centered">
+ <div class="sdc-tile-info-line title">Vendor Name</div>
+ <div class="sdc-tile-info-line">
+ <button class="sdc-button sdc-button-outline-rounded sdc-button__dark-gray">100 VSPs</button>
+ </div>
+ </div>
+ </div>
+ <div class="sdc-tile-footer centered">
+ <span class="sdc-tile-footer-cell">
+ <button class="sdc-button sdc-button-link sdc-button__primary sdc-button__with-icon">
+ <div class="svg-icon-wrapper sdc-button-icon right">
+ <!-- insert SVG -->
+ <span class="svg-icon-label sdc-button-label">Create new VSP</span>
+ </div>
+ </button>
+ </span>
+ </div>
+</div>
diff --git a/components/tile/vfc-tile.html b/components/tile/vfc-tile.html
new file mode 100644
index 0000000..7b4753e
--- /dev/null
+++ b/components/tile/vfc-tile.html
@@ -0,0 +1,17 @@
+<div class="sdc-tile">
+ <div class="sdc-tile-header purple">VFC</div>
+ <div class="sdc-tile-content">
+ <div class="sdc-tile-content-icon">
+ <div class="svg-icon-wrapper">
+ <!-- insert SVG -->
+ </div>
+ </div>
+ <div class="sdc-tile-content-info">
+ <div class="sdc-tile-info-line title">Title</div>
+ <div class="sdc-tile-info-line subtitle">V 1.0</div>
+ </div>
+ </div>
+ <div class="sdc-tile-footer">
+ <span class="sdc-tile-footer-cell">Certified</span>
+ </div>
+</div>
diff --git a/components/tile/vlm-tile.html b/components/tile/vlm-tile.html
new file mode 100644
index 0000000..be629a1
--- /dev/null
+++ b/components/tile/vlm-tile.html
@@ -0,0 +1,22 @@
+<div class="sdc-tile">
+ <div class="sdc-tile-header purple">VLM</div>
+ <div class="sdc-tile-content">
+ <div class="sdc-tile-content-icon purple">
+ <div class="svg-icon-wrapper">
+ <!-- insert SVG -->
+ </div>
+ </div>
+ <div class="sdc-tile-content-info">
+ <div class="sdc-tile-info-line title">VLM Name</div>
+ </div>
+ </div>
+ <div class="sdc-tile-footer">
+ <span class="sdc-tile-footer-cell">Certified</span>
+ <span class="sdc-tile-footer-cell">
+ <div class="svg-icon-wrapper left">
+ <!-- insert SVG -->
+ <span class="svg-icon-label">Owner</span>
+ </div>
+ </span>
+ </div>
+</div>
diff --git a/components/tile/vsp-tile.html b/components/tile/vsp-tile.html
new file mode 100644
index 0000000..1a3dc1d
--- /dev/null
+++ b/components/tile/vsp-tile.html
@@ -0,0 +1,17 @@
+<div class="sdc-tile">
+ <div class="sdc-tile-header blue">VSP</div>
+ <div class="sdc-tile-content">
+ <div class="sdc-tile-content-icon blue">
+ <div class="svg-icon-wrapper">
+ <!-- insert SVG -->
+ </div>
+ </div>
+ <div class="sdc-tile-content-info">
+ <div class="sdc-tile-info-line supertitle">VLM</div>
+ <div class="sdc-tile-info-line title">VSP Name</div>
+ </div>
+ </div>
+ <div class="sdc-tile-footer">
+ <span class="sdc-tile-footer-cell">Draft</span>
+ </div>
+</div>