🍷 Digital Wine Cellar – Pattern Library

Sommelier filters 

<div class="simple-accordion">
    <div class="simple-accordion-item">
        <p class="simple-accordion-title">
            <span>Price range</span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#angle" />
            </svg>
        </p>
        <div class="collapsible-content">
            <div class="simple-accordion-inner-content">
                <fieldset class="custom-toggle-group">
                    <legend>Price range</legend>
                    <div class="fieldset-grid">
                        <label>
                            <input type="checkbox" id="fb1693f0-ae67-8494-5adb-53c092c0e91f" name="0783afb9-bc33-0d37-21b7-d96e85a05be7">
                            <span>Up to €10</span>
                        </label>
                        <label>
                            <input type="checkbox" id="e35718c7-f8c8-29c2-4261-5591ada3825b" name="0783afb9-bc33-0d37-21b7-d96e85a05be7">
                            <span>€10 - €20</span>
                        </label>
                        <label>
                            <input type="checkbox" id="bc9e0360-c253-2e5e-661a-4c7b6421c80e" name="0783afb9-bc33-0d37-21b7-d96e85a05be7">
                            <span>€20 - €40</span>
                        </label>
                        <label>
                            <input type="checkbox" id="526ccd2f-9621-d840-c6ea-9f6e52f7413f" name="0783afb9-bc33-0d37-21b7-d96e85a05be7">
                            <span>€40 - €80</span>
                        </label>
                        <label>
                            <input type="checkbox" id="89769b40-8028-60f2-0b8f-87d4fc06a412" name="0783afb9-bc33-0d37-21b7-d96e85a05be7">
                            <span>€80 and up</span>
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<div class="simple-accordion">
    <div class="simple-accordion-item">
        <p class="simple-accordion-title">
            <span>Colour</span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#angle" />
            </svg>
        </p>
        <div class="collapsible-content">
            <div class="simple-accordion-inner-content">
                <fieldset class="custom-toggle-group">
                    <legend>Colour</legend>
                    <div class="fieldset-grid">
                        <label>
                            <input type="checkbox" id="d6789ea3-37e5-3aea-874c-bacd246aba10" name="8bf7b8cf-928b-5307-08ea-01d6c144a6c4">
                            <span>Red</span>
                        </label>
                        <label>
                            <input type="checkbox" id="15342e05-c421-439d-086a-fdec89b55487" name="8bf7b8cf-928b-5307-08ea-01d6c144a6c4">
                            <span>Rosé</span>
                        </label>
                        <label>
                            <input type="checkbox" id="ce959819-138a-84f5-f0b3-75132204de66" name="8bf7b8cf-928b-5307-08ea-01d6c144a6c4">
                            <span>White</span>
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<div class="simple-accordion">
    <div class="simple-accordion-item">
        <p class="simple-accordion-title">
            <span>Country</span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#angle" />
            </svg>
        </p>
        <div class="collapsible-content">
            <div class="simple-accordion-inner-content">
                <fieldset class="custom-toggle-group">
                    <legend>Country</legend>
                    <div class="fieldset-grid">
                        <label>
                            <input type="checkbox" id="2b81cb35-fcb6-1806-b1a4-126726fdb977" name="28e413e5-a7b0-d178-37f9-638bdcdbb823">
                            <span>Italy</span>
                        </label>
                        <label>
                            <input type="checkbox" id="a8f07050-8ab7-59a9-3e67-b7f45b3b8109" name="28e413e5-a7b0-d178-37f9-638bdcdbb823">
                            <span>Spain</span>
                        </label>
                        <label>
                            <input type="checkbox" id="5d1f304f-5132-84a7-118d-39f8eca32831" name="28e413e5-a7b0-d178-37f9-638bdcdbb823">
                            <span>France</span>
                        </label>
                        <label>
                            <input type="checkbox" id="496e24d9-1ded-e2df-3558-5c4e129aa561" name="28e413e5-a7b0-d178-37f9-638bdcdbb823">
                            <span>Argentina</span>
                        </label>
                        <label>
                            <input type="checkbox" id="d88a2e30-1e0a-dfb6-de78-8bcb67ad53ca" name="28e413e5-a7b0-d178-37f9-638bdcdbb823">
                            <span>Germany</span>
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<div class="simple-accordion">
    <div class="simple-accordion-item">
        <p class="simple-accordion-title">
            <span>Grape</span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#angle" />
            </svg>
        </p>
        <div class="collapsible-content">
            <div class="simple-accordion-inner-content">
                <fieldset class="custom-toggle-group">
                    <legend>Grape</legend>
                    <div class="fieldset-grid">
                        <label>
                            <input type="checkbox" id="1b52381c-473d-cbe7-3054-79e346939f50" name="133f799c-233a-aac0-f692-23f43101471d">
                            <span>Chardonnay</span>
                        </label>
                        <label>
                            <input type="checkbox" id="ab8fd10e-9a31-8eb7-b1e0-2f1847b97578" name="133f799c-233a-aac0-f692-23f43101471d">
                            <span>Cabernet Sauvignon</span>
                        </label>
                        <label>
                            <input type="checkbox" id="388f3d78-40db-0bec-e780-564a821c4991" name="133f799c-233a-aac0-f692-23f43101471d">
                            <span>Grenache</span>
                        </label>
                        <label>
                            <input type="checkbox" id="8a524528-f14c-072e-fa46-9a7b75e576dd" name="133f799c-233a-aac0-f692-23f43101471d">
                            <span>Syrah</span>
                        </label>
                        <label>
                            <input type="checkbox" id="c22fd43a-8dd3-e97a-e9e3-a37816cef573" name="133f799c-233a-aac0-f692-23f43101471d">
                            <span>Merlot</span>
                        </label>
                        <label>
                            <input type="checkbox" id="08fb7c73-46e6-311a-41b5-207bac3e89c8" name="133f799c-233a-aac0-f692-23f43101471d">
                            <span>Sangiovese</span>
                        </label>
                        <label>
                            <input type="checkbox" id="70db3dea-c30f-108a-dd2e-8ce9a8334c12" name="133f799c-233a-aac0-f692-23f43101471d">
                            <span>Pinot Noir</span>
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<div class="simple-accordion">
    <div class="simple-accordion-item">
        <p class="simple-accordion-title">
            <span>Type</span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#angle" />
            </svg>
        </p>
        <div class="collapsible-content">
            <div class="simple-accordion-inner-content">
                <fieldset class="custom-toggle-group">
                    <legend></legend>
                    <div class="fieldset-grid">
                        <label>
                            <input type="checkbox" id="76894e5f-08b7-6dae-87be-9bc5626224d0" name="61e77a19-7fc0-12b4-bde7-5e1900bb9be5">
                            <span>Still</span>
                        </label>
                        <label>
                            <input type="checkbox" id="50c416a4-b538-d101-1b03-ab7a3a1e1f30" name="61e77a19-7fc0-12b4-bde7-5e1900bb9be5">
                            <span>Sparkling</span>
                        </label>
                        <label>
                            <input type="checkbox" id="2e386cdd-35ee-71a0-7636-0ddcfa08cb7d" name="61e77a19-7fc0-12b4-bde7-5e1900bb9be5">
                            <span>Fortified</span>
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<div class="simple-accordion">
    <div class="simple-accordion-item">
        <p class="simple-accordion-title">
            <span>Style</span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#angle" />
            </svg>
        </p>
        <div class="collapsible-content">
            <div class="simple-accordion-inner-content">
                <fieldset class="custom-toggle-group">
                    <legend></legend>
                    <div class="fieldset-grid">
                        <label>
                            <input type="checkbox" id="c3896edb-76f5-2112-ae61-d2a7a2a5cfbc" name="4ddee258-e1a0-3992-687e-43bbb2f00863">
                            <span>Dry</span>
                        </label>
                        <label>
                            <input type="checkbox" id="87b54aee-984f-d9e2-e56e-d6af8f1a18a8" name="4ddee258-e1a0-3992-687e-43bbb2f00863">
                            <span>Medium dry</span>
                        </label>
                        <label>
                            <input type="checkbox" id="863d5a4e-91b4-66c8-990c-b1d28bff37bb" name="4ddee258-e1a0-3992-687e-43bbb2f00863">
                            <span>Medium Sweet</span>
                        </label>
                        <label>
                            <input type="checkbox" id="aa6f0d30-61cc-fea9-2d73-d373ba8143af" name="4ddee258-e1a0-3992-687e-43bbb2f00863">
                            <span>Sweet</span>
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<div class="simple-accordion">
    <div class="simple-accordion-item">
        <p class="simple-accordion-title">
            <span>Weight</span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#angle" />
            </svg>
        </p>
        <div class="collapsible-content">
            <div class="simple-accordion-inner-content">
                <fieldset class="custom-toggle-group">
                    <legend></legend>
                    <div class="fieldset-grid">
                        <label>
                            <input type="checkbox" id="5827a862-66b0-aeea-af0c-f6832c87869b" name="b41aebbd-3f87-3821-6bf4-28826582d611">
                            <span>Light bodied</span>
                        </label>
                        <label>
                            <input type="checkbox" id="225ca951-ee51-2ffc-e960-a03336905a97" name="b41aebbd-3f87-3821-6bf4-28826582d611">
                            <span>Medium bodied</span>
                        </label>
                        <label>
                            <input type="checkbox" id="504e707e-c3a3-0c2b-1846-45c1ff774485" name="b41aebbd-3f87-3821-6bf4-28826582d611">
                            <span>Light Bodied to Full bodied</span>
                        </label>
                        <label>
                            <input type="checkbox" id="e10fdc02-4b01-8138-3dc9-aa207f864373" name="b41aebbd-3f87-3821-6bf4-28826582d611">
                            <span>Medium bodied to Full bodied</span>
                        </label>
                        <label>
                            <input type="checkbox" id="047c3d8b-d50c-77fd-1500-143e70537ea5" name="b41aebbd-3f87-3821-6bf4-28826582d611">
                            <span>Full bodied</span>
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<div class="simple-accordion">
    <div class="simple-accordion-item">
        <p class="simple-accordion-title">
            <span>Region</span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#angle" />
            </svg>
        </p>
        <div class="collapsible-content">
            <div class="simple-accordion-inner-content">
                <fieldset class="custom-toggle-group">
                    <legend></legend>
                    <div class="fieldset-grid">
                        <label>
                            <input type="checkbox" id="fb86de87-d732-def4-c264-2e6005f3f03c" name="9b5c0f33-5def-475a-cea7-de2c238b34d1">
                            <span>Region 1</span>
                        </label>
                        <label>
                            <input type="checkbox" id="226a8f95-ba09-6e7a-37e1-de80b899e648" name="9b5c0f33-5def-475a-cea7-de2c238b34d1">
                            <span>Region 2</span>
                        </label>
                        <label>
                            <input type="checkbox" id="459b781f-797d-5a6a-5089-9f1e3a9e1955" name="9b5c0f33-5def-475a-cea7-de2c238b34d1">
                            <span>Region 3</span>
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<div class="simple-accordion">
    <div class="simple-accordion-item">
        <p class="simple-accordion-title">
            <span>District</span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#angle" />
            </svg>
        </p>
        <div class="collapsible-content">
            <div class="simple-accordion-inner-content">
                <fieldset class="custom-toggle-group">
                    <legend></legend>
                    <div class="fieldset-grid">
                        <label>
                            <input type="checkbox" id="37138035-3279-5c11-3fe8-54f8d8f111e0" name="1c8250f0-6275-39a2-5d5d-ae1f208d089d">
                            <span>District 1</span>
                        </label>
                        <label>
                            <input type="checkbox" id="c81b248f-b167-27b8-49d8-a077fe1208b7" name="1c8250f0-6275-39a2-5d5d-ae1f208d089d">
                            <span>District 2</span>
                        </label>
                        <label>
                            <input type="checkbox" id="47e4d8b9-8721-64aa-3d47-cc319d73deef" name="1c8250f0-6275-39a2-5d5d-ae1f208d089d">
                            <span>District 3</span>
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<div class="simple-accordion">
    <div class="simple-accordion-item">
        <p class="simple-accordion-title">
            <span>Bottle size</span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#angle" />
            </svg>
        </p>
        <div class="collapsible-content">
            <div class="simple-accordion-inner-content">
                <fieldset class="custom-toggle-group">
                    <legend></legend>
                    <div class="fieldset-grid">
                        <label>
                            <input type="checkbox" id="1680c29a-9094-edfd-502c-7aae73102c0a" name="0c04936b-5647-d338-22ca-1d72f603915a">
                            <span>37,5 cl</span>
                        </label>
                        <label>
                            <input type="checkbox" id="63c25185-e192-f7b6-231c-3e36cae71a08" name="0c04936b-5647-d338-22ca-1d72f603915a">
                            <span>75 cl</span>
                        </label>
                        <label>
                            <input type="checkbox" id="3ee58706-4d82-0382-47a1-06d1ab34c91b" name="0c04936b-5647-d338-22ca-1d72f603915a">
                            <span>150 cl</span>
                        </label>
                        <label>
                            <input type="checkbox" id="975cb8e7-830b-a63d-28f2-e5fc05e38c0b" name="0c04936b-5647-d338-22ca-1d72f603915a">
                            <span>300 cl</span>
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<div class="simple-accordion">
    <div class="simple-accordion-item">
        <p class="simple-accordion-title">
            <span>Drinkability</span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#angle" />
            </svg>
        </p>
        <div class="collapsible-content">
            <div class="simple-accordion-inner-content">
                <fieldset class="custom-toggle-group">
                    <legend></legend>
                    <div class="fieldset-grid">
                        <label>
                            <input type="checkbox" id="66c517d3-0724-7281-c166-b110bf7c70a4" name="a897800d-0a73-3c95-121e-7fa6446c6076">
                            <span>Old</span>
                        </label>
                        <label>
                            <input type="checkbox" id="7aa7d7c9-e200-9d94-4b2e-ba658faf0cdd" name="a897800d-0a73-3c95-121e-7fa6446c6076">
                            <span>Early</span>
                        </label>
                        <label>
                            <input type="checkbox" id="c6a4ff55-61e8-2fc9-ba24-3a82d1d2d763" name="a897800d-0a73-3c95-121e-7fa6446c6076">
                            <span>Mature</span>
                        </label>
                        <label>
                            <input type="checkbox" id="4205ff65-d772-9252-34cb-2118f5ff168d" name="a897800d-0a73-3c95-121e-7fa6446c6076">
                            <span>Late</span>
                        </label>
                        <label>
                            <input type="checkbox" id="e9fe4216-3dc1-b7e5-c7e4-698f81d5f575" name="a897800d-0a73-3c95-121e-7fa6446c6076">
                            <span>Young</span>
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>
 
{{#> @simple-accordion title="Price range" }}
  {{> @custom-toggle price id=(random)}}
{{/ @simple-accordion}}

{{#> @simple-accordion title="Colour" }}
  {{> @custom-toggle colour id=(random)}}
{{/ @simple-accordion}}

{{#> @simple-accordion title="Country" }}
  {{> @custom-toggle country id=(random)}}
{{/ @simple-accordion}}

{{#> @simple-accordion title="Grape" }}
  {{> @custom-toggle grape id=(random)}}
{{/ @simple-accordion}}

{{#> @simple-accordion title="Type" }}
  {{> @custom-toggle type id=(random)}}
{{/ @simple-accordion}}

{{#> @simple-accordion title="Style" }}
  {{> @custom-toggle style id=(random)}}
{{/ @simple-accordion}}

{{#> @simple-accordion title="Weight" }}
  {{> @custom-toggle weight id=(random)}}
{{/ @simple-accordion}}

{{#> @simple-accordion title="Region" }}
  {{> @custom-toggle region id=(random)}}
{{/ @simple-accordion}}

{{#> @simple-accordion title="District" }}
  {{> @custom-toggle district id=(random)}}
{{/ @simple-accordion}}

{{#> @simple-accordion title="Bottle size" }}
  {{> @custom-toggle bottle-size id=(random)}}
{{/ @simple-accordion}}

{{#> @simple-accordion title="Drinkability" }}
  {{> @custom-toggle drinkability id=(random)}}
{{/ @simple-accordion}}
 
{
  "price": {
    "legend": "Price range",
    "type": "checkbox",
    "toggles": [
      {
        "label": "Up to €10"
      },
      {
        "label": "€10 - €20"
      },
      {
        "label": "€20 - €40"
      },
      {
        "label": "€40 - €80"
      },
      {
        "label": "€80 and up"
      }
    ]
  },
  "colour": {
    "legend": "Colour",
    "type": "checkbox",
    "toggles": [
      {
        "label": "Red"
      },
      {
        "label": "Rosé"
      },
      {
        "label": "White"
      }
    ]
  },
  "country": {
    "legend": "Country",
    "type": "checkbox",
    "toggles": [
      {
        "label": "Italy"
      },
      {
        "label": "Spain"
      },
      {
        "label": "France"
      },
      {
        "label": "Argentina"
      },
      {
        "label": "Germany"
      }
    ]
  },
  "grape": {
    "legend": "Grape",
    "type": "checkbox",
    "toggles": [
      {
        "label": "Chardonnay"
      },
      {
        "label": "Cabernet Sauvignon"
      },
      {
        "label": "Grenache"
      },
      {
        "label": "Syrah"
      },
      {
        "label": "Merlot"
      },
      {
        "label": "Sangiovese"
      },
      {
        "label": "Pinot Noir"
      }
    ]
  },
  "type": {
    "label": "Type",
    "type": "checkbox",
    "toggles": [
      {
        "label": "Still"
      },
      {
        "label": "Sparkling"
      },
      {
        "label": "Fortified"
      }
    ]
  },
  "style": {
    "label": "Style",
    "type": "checkbox",
    "toggles": [
      {
        "label": "Dry"
      },
      {
        "label": "Medium dry"
      },
      {
        "label": "Medium Sweet"
      },
      {
        "label": "Sweet"
      }
    ]
  },
  "weight": {
    "label": "Weight",
    "type": "checkbox",
    "toggles": [
      {
        "label": "Light bodied"
      },
      {
        "label": "Medium bodied"
      },
      {
        "label": "Light Bodied to Full bodied"
      },
      {
        "label": "Medium bodied to Full bodied"
      },
      {
        "label": "Full bodied"
      }
    ]
  },
  "region": {
    "label": "Region",
    "type": "checkbox",
    "toggles": [
      {
        "label": "Region 1"
      },
      {
        "label": "Region 2"
      },
      {
        "label": "Region 3"
      }
    ]
  },
  "district": {
    "label": "District",
    "type": "checkbox",
    "toggles": [
      {
        "label": "District 1"
      },
      {
        "label": "District 2"
      },
      {
        "label": "District 3"
      }
    ]
  },
  "bottle-size": {
    "label": "Bottle size",
    "type": "checkbox",
    "toggles": [
      {
        "label": "37,5 cl"
      },
      {
        "label": "75 cl"
      },
      {
        "label": "150 cl"
      },
      {
        "label": "300 cl"
      }
    ]
  },
  "drinkability": {
    "label": "Drinkability",
    "type": "checkbox",
    "toggles": [
      {
        "label": "Old"
      },
      {
        "label": "Early"
      },
      {
        "label": "Mature"
      },
      {
        "label": "Late"
      },
      {
        "label": "Young"
      }
    ]
  }
}

No notes defined.