🍷 Digital Wine Cellar – Pattern Library

Suggestion table 

<div class="card ">
    <h3 class="suggestion-table-heading">
        <a href="../preview/product-page.html" class="block-link">
            <span>Consulvinus, </span>
            <span>La Strada</span>
        </a>
        <svg class="icon promo" height="20" width="20" aria-hidden="true">
            <use xlink:href="../../sprite.svg#star" />
        </svg>

        <svg class="icon wine-type" height="20" width="20" aria-hidden="true">
            <use xlink:href="../../sprite.svg#wine-red" />
        </svg>
    </h3>
    <p class="suggestion-wine-origin"><svg class="icon " height="20" width="20" aria-hidden="true">
            <use xlink:href="../../sprite.svg#flag-es" />
        </svg>
        Spain</p>
    <table class="suggestion-table">
        <tr>
            <th scope="row">Vintage</th>
            <td>2017</td>
        </tr>
        <tr>
            <th scope="row">Alcohol</th>
            <td>13.5%</td>
        </tr>
        <tr>
            <th scope="row">Description</th>
            <td>Very fruity taste with hints of barrels, blackberries, dark cherries, violet, woodland and vanilla.
            </td>
        </tr>
        <tr>
            <th scope="row">Stored at</th>
            <td>shelf 1</td>
        </tr>
        <tr>
            <th scope="row">Suitability</th>
            <td>
                <div class="suitability">
                    <label for="suitability-">95%</label>
                    <progress id="suitability-" max="100" value="95">95</progress>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">Price</th>
            <td>€28</td>
        </tr>
    </table>
    <p class="selection-info">
        <em><strong>1</strong> bottle selected from cellar (<strong>96</strong> remaining)</em>
    </p>
    <div class="suggestion-actions inline">
        <button type="button" class="alt">
            <span>
                <svg class="icon alt" height="20" width="20" aria-hidden="true">
                    <use xlink:href="../../sprite.svg#remove" />
                </svg>
                <span>Deselect wine</span>
            </span>
        </button>
        <button type="button">
            <span>
                <svg class="icon " height="20" width="20" aria-hidden="true">
                    <use xlink:href="../../sprite.svg#add" />
                </svg>
                <span>Select wine</span>
            </span>
        </button>
    </div>
</div>
 
{{#> @card}}
  <h3 class="suggestion-table-heading">
    <a href="{{ path '/components/preview/product-page' }}" class="block-link">
      {{#if producer}}<span>{{producer}}, </span>{{/if}}
      <span>{{name}}</span>
    </a>
      {{#if promo}}{{> @svg promo modifier="promo"}}{{/if}}
      {{> @svg wine-type modifier="wine-type" }}
  </h3>
  <p class="suggestion-wine-origin">{{> @svg flag}} {{country}}</p>
  <table class="suggestion-table">
    <tr>
      <th scope="row">Vintage</th>
      <td>{{vintage}}</td>
    </tr>
    <tr>
      <th scope="row">Alcohol</th>
      <td>{{alcohol}}</td>
    </tr>
    <tr>
      <th scope="row">Description</th>
      <td>{{description}}</td>
    </tr>
    <tr>
      <th scope="row">Stored at</th>
      <td>{{stored-at}}</td>
    </tr>
    <tr>
      <th scope="row">Suitability</th>
      <td>
        <div class="suitability">
          <label for="suitability-{{@index}}">{{suitability}}%</label>
          <progress id="suitability-{{@index}}" max="100" value="{{suitability}}">{{suitability}}</progress>
        </div>
      </td>
    </tr>
    <tr>
      <th scope="row">Price</th>
      <td>{{price}}</td>
    </tr>
  </table>
  <p class="selection-info">
    {{#if selection-info}}
    <em><strong>{{selection-info.selected}}</strong> bottle selected from cellar (<strong>{{selection-info.remaining}}</strong> remaining)</em>
    {{/if}}
  </p>
  <div class="suggestion-actions inline">
      {{> @button text="Deselect wine" modifier="alt" icon="remove"}}
      {{> @button text="Select wine" icon="add"}}
  </div>
{{/ @card}}
 
{
  "name": "La Strada",
  "country": "Spain",
  "producer": "Consulvinus",
  "vintage": 2017,
  "alcohol": "13.5%",
  "price": "€28",
  "promo": {
    "icon": "star"
  },
  "flag": {
    "icon": "flag-es"
  },
  "wine-type": {
    "icon": "wine-red"
  },
  "stored-at": "shelf 1",
  "description": "Very fruity taste with hints of barrels, blackberries, dark cherries, violet, woodland and vanilla.\n",
  "suitability": 95,
  "selection-info": {
    "selected": 1,
    "remaining": 96
  }
}
  • Content: 
    /**
 * Suggestion table
 */

@media screen {

  .suggestion-table-heading {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 1.5em;
    text-align: left;
  }

  .suggestion-table-heading * + * {
    margin: 0 0 0 0.25em;
  }

  /* Promoted product icon */
  .suggestion-table-heading .promo {
    fill: var(--promo);
    height: 0.8em;
    width: 0.8em;
  }

  /* Wine type icon */
  .suggestion-table-heading .wine-type {
    margin-left: auto;
    height: 1.5em;
  }

  /* Country of origin */
  .suggestion-wine-origin {
    display: flex;
    align-items: center;
    margin: 0;
  }

  .suggestion-wine-origin .icon {
    margin-right: 0.25em;
    width: 1.3em;
  }

  /* Suggestion table */
  .suggestion-table {
    width: 100%;
  }

  .suggestion-table tr:nth-child(even) {
    background-color: transparent;
  }

  .suggestion-table th {
    text-align: left;
    padding-left: 0;
    vertical-align: top;
    width: 15ch;
  }

  .suggestion-table td {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
  }

  /* Suitability score */
  .suitability {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }

  .suitability label {
    display: block;
    font-weight: bold;
    margin-left: 0.5em;
  }

  .suitability progress[value] {
    color: var(--suitability);
    margin-top: 0;
    border: 0;
    height: 0.75em;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearence: none;
  }

  .suitability progress[value]::-webkit-progress-bar {
    background-color: var(--light-grey);
  }

  .suitability progress[value]::-moz-progress-bar,
  .suitability progress[value]::-webkit-progress-value {
    background-color: var(--suitability);
  }

  /* Selection info text */
  .selection-info {
    margin-top: 2em;
    text-align: center;
    font-size: 0.9em;
    min-height: 1.45em;
  }

  /* Wine suggestion actions */
  .suggestion-actions {
    display: flex;
    justify-content: flex-end;
  }
}
  • URL: /components/raw/suggestion-table/suggestion-table.css
  • Filesystem Path: components/02_molecules/suggestion-table/suggestion-table.css
  • Size: 2 KB

Suggestion table

Displays suggested wines in the digital sommelier.