In Beta - 0.3.0
SiftCMS - Unstyled UI Starter
For Webstudio
If using Webstudio, just clone the whole UI Starter through this
link
Tutorial
Ranking
Article
For Webflow
If using Webflow, copy the component on the live website using the copy button.
Tutorial
Ranking
Article
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"b1f52ee1-af98-0e0d-3c43-24a61c58e86e","type":"Block","tag":"div","classes":["ab3659cf-9fb9-8b37-76fd-c5f8804de306"],"children":["b5c4614f-d5e4-d1f6-f4fb-5728c87341e6"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b5c4614f-d5e4-d1f6-f4fb-5728c87341e6","type":"Block","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a958"],"children":["fd1e4b8f-7954-bf69-b814-6cb0d87d8219","2c78d60e-60d5-68bd-4001-6e3e19100a6e","f318460e-a356-ff18-ec4a-aa9f62115aea","7e372064-cc3a-8c93-7c84-b38a8c2eb479"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"fd1e4b8f-7954-bf69-b814-6cb0d87d8219","type":"DOM","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a956"],"children":[],"data":{"tag":"input","attributes":[{"name":"placeholder","value":"Search by name"},{"name":"type","value":"text"},{"name":"data-search","value":"true"}]}},{"_id":"2c78d60e-60d5-68bd-4001-6e3e19100a6e","type":"DOM","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a95b"],"children":["b35debd9-986b-44ca-ce2e-995a40da17e9","9357b451-d331-b788-b8f8-e10704b8be38","3f224cd3-692d-e02f-42d3-497253af9e0a","5ca3f62f-78e8-d94e-109d-60e80ebc4f18"],"data":{"tag":"select","attributes":[{"name":"data-select","value":"true"}]}},{"_id":"b35debd9-986b-44ca-ce2e-995a40da17e9","type":"DOM","tag":"div","classes":[],"children":["4f27bc05-fb75-1ed1-4ab2-c094a0d56c54"],"data":{"tag":"option","attributes":[{"name":"value","value":""}]}},{"_id":"4f27bc05-fb75-1ed1-4ab2-c094a0d56c54","type":"Block","tag":"div","classes":[],"children":["b498b61a-912d-f46f-91ec-efd9dcc8e74f"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b498b61a-912d-f46f-91ec-efd9dcc8e74f","text":true,"v":"Select an option"},{"_id":"9357b451-d331-b788-b8f8-e10704b8be38","type":"DOM","tag":"div","classes":[],"children":["8e641bab-d2bf-2e0f-ed08-2d7bf057dcb8"],"data":{"tag":"option","attributes":[{"name":"value","value":"design"}]}},{"_id":"8e641bab-d2bf-2e0f-ed08-2d7bf057dcb8","type":"Block","tag":"div","classes":[],"children":["bbd6777a-30e8-95f8-9a37-38de1eb37c98"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"bbd6777a-30e8-95f8-9a37-38de1eb37c98","text":true,"v":"Design"},{"_id":"3f224cd3-692d-e02f-42d3-497253af9e0a","type":"DOM","tag":"div","classes":[],"children":["9f72f275-70a5-42c6-7766-5d9f3c17c443"],"data":{"tag":"option","attributes":[{"name":"value","value":"dev"}]}},{"_id":"9f72f275-70a5-42c6-7766-5d9f3c17c443","type":"Block","tag":"div","classes":[],"children":["60a80f26-3856-b580-7022-e629e4802afe"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"60a80f26-3856-b580-7022-e629e4802afe","text":true,"v":"Dev"},{"_id":"5ca3f62f-78e8-d94e-109d-60e80ebc4f18","type":"DOM","tag":"div","classes":[],"children":["444e4339-1020-2a88-edc4-31e8e47374a4"],"data":{"tag":"option","attributes":[{"name":"value","value":"3d"}]}},{"_id":"444e4339-1020-2a88-edc4-31e8e47374a4","type":"Block","tag":"div","classes":[],"children":["057a14a5-b0a3-2388-535a-7b632a12e0c7"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"057a14a5-b0a3-2388-535a-7b632a12e0c7","text":true,"v":"3D"},{"_id":"f318460e-a356-ff18-ec4a-aa9f62115aea","type":"HFlex","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a957"],"children":["228ff27b-de5f-a5c9-0762-a67145980794","0cef3dba-ef25-cfa3-5882-f800facce36b","e6627c29-2cee-c5dc-7ba7-7f8e7fa29716"],"data":{"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":"custom-checkboxes"},"xattr":[{"name":"data-checkboxes","value":"true"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"228ff27b-de5f-a5c9-0762-a67145980794","type":"HFlex","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a95c"],"children":["5de7cbe1-95f4-6f8b-8958-a32daa046212","1228779a-3d55-b4d1-c430-4feeaa8a5286"],"data":{"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5de7cbe1-95f4-6f8b-8958-a32daa046212","type":"DOM","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a955"],"children":[],"data":{"tag":"input","attributes":[{"name":"type","value":"checkbox"},{"name":"name","value":"tutorial"}]}},{"_id":"1228779a-3d55-b4d1-c430-4feeaa8a5286","type":"DOM","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a95d"],"children":["f8b073fa-e0c6-9347-1bf3-7b31644e05a5"],"data":{"tag":"label","attributes":[{"name":"for","value":"tutorial"}]}},{"_id":"f8b073fa-e0c6-9347-1bf3-7b31644e05a5","text":true,"v":"Tutorial"},{"_id":"0cef3dba-ef25-cfa3-5882-f800facce36b","type":"HFlex","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a95c"],"children":["cdd18d6b-1337-e980-9f4d-416b48c4b535","92c46f23-e020-bf09-87fe-af977b92b3b9"],"data":{"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"cdd18d6b-1337-e980-9f4d-416b48c4b535","type":"DOM","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a955"],"children":[],"data":{"tag":"input","attributes":[{"name":"type","value":"checkbox"},{"name":"name","value":"ranking"}]}},{"_id":"92c46f23-e020-bf09-87fe-af977b92b3b9","type":"DOM","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a95d"],"children":["1076a282-3c57-e085-e487-5ef1e0903369"],"data":{"tag":"label","attributes":[{"name":"for","value":"ranking"}]}},{"_id":"1076a282-3c57-e085-e487-5ef1e0903369","text":true,"v":"Ranking"},{"_id":"e6627c29-2cee-c5dc-7ba7-7f8e7fa29716","type":"HFlex","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a95c"],"children":["ba773e36-1d9a-b8ee-54fd-3222264acaa4","25fbea6c-969a-5cb5-1e52-2741f3b92658"],"data":{"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ba773e36-1d9a-b8ee-54fd-3222264acaa4","type":"DOM","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a955"],"children":[],"data":{"tag":"input","attributes":[{"name":"type","value":"checkbox"},{"name":"name","value":"article"}]}},{"_id":"25fbea6c-969a-5cb5-1e52-2741f3b92658","type":"DOM","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a95d"],"children":["6c31a155-dc79-919c-a681-401e87caabe3"],"data":{"tag":"label","attributes":[{"name":"for","value":"article"}]}},{"_id":"6c31a155-dc79-919c-a681-401e87caabe3","text":true,"v":"Article"},{"_id":"7e372064-cc3a-8c93-7c84-b38a8c2eb479","type":"Block","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a95a"],"children":["c4e250cc-f39b-c8d3-4b39-8050d6b275db"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"c4e250cc-f39b-c8d3-4b39-8050d6b275db","type":"DOM","tag":"div","classes":["27c8fbbd-6d4a-dfbe-616e-02b43181a959"],"children":["d0aebc1f-a46a-d3f3-03d9-711eaa569ded","b9f8845f-dfd9-6583-a245-3b398abe9e07","69b8cc63-f37e-ed23-b50a-156295dc9b6c","1c3c7533-1cf0-2a21-d214-34c5d1225335","5f428805-4a5c-8112-8532-28ea2342ee6b"],"data":{"tag":"select","attributes":[{"name":"data-sort-select","value":"true"}]}},{"_id":"d0aebc1f-a46a-d3f3-03d9-711eaa569ded","type":"DOM","tag":"div","classes":[],"children":["5dedc7d8-acec-f9d5-1e8f-21862b65694a"],"data":{"tag":"option","attributes":[]}},{"_id":"5dedc7d8-acec-f9d5-1e8f-21862b65694a","type":"Block","tag":"div","classes":[],"children":["b5fb08c0-4694-7c4f-1456-dc42990e87f8"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b5fb08c0-4694-7c4f-1456-dc42990e87f8","text":true,"v":"Sort by"},{"_id":"b9f8845f-dfd9-6583-a245-3b398abe9e07","type":"DOM","tag":"div","classes":[],"children":["9e7d1878-85da-568b-52b0-cc5656d464ca"],"data":{"tag":"option","attributes":[{"name":"data-ascending-sort","value":"true"}]}},{"_id":"9e7d1878-85da-568b-52b0-cc5656d464ca","type":"Block","tag":"div","classes":[],"children":["0cb68e13-87a1-bec0-866d-d0bbf3f9cb5f"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0cb68e13-87a1-bec0-866d-d0bbf3f9cb5f","text":true,"v":"A-Z"},{"_id":"69b8cc63-f37e-ed23-b50a-156295dc9b6c","type":"DOM","tag":"div","classes":[],"children":["a262a872-a594-8c4e-3015-c095b79cde0b"],"data":{"tag":"option","attributes":[{"name":"data-descending-sort","value":"true"}]}},{"_id":"a262a872-a594-8c4e-3015-c095b79cde0b","type":"Block","tag":"div","classes":[],"children":["61e34c90-e406-a201-f6eb-a5c94e60bf20"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"61e34c90-e406-a201-f6eb-a5c94e60bf20","text":true,"v":"Z-A"},{"_id":"1c3c7533-1cf0-2a21-d214-34c5d1225335","type":"DOM","tag":"div","classes":[],"children":["09c47ad6-9102-630a-7256-8cecf0229246"],"data":{"tag":"option","attributes":[{"name":"data-newest-sort","value":"true"}]}},{"_id":"09c47ad6-9102-630a-7256-8cecf0229246","type":"Block","tag":"div","classes":[],"children":["5665cf40-700f-e54a-fa51-95c0479e469f"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5665cf40-700f-e54a-fa51-95c0479e469f","text":true,"v":"Newest"},{"_id":"5f428805-4a5c-8112-8532-28ea2342ee6b","type":"DOM","tag":"div","classes":[],"children":["5fb0eb33-ca51-e1de-89f0-f3b9ae371777"],"data":{"tag":"option","attributes":[{"name":"data-oldest-sort","value":"true"}]}},{"_id":"5fb0eb33-ca51-e1de-89f0-f3b9ae371777","type":"Block","tag":"div","classes":[],"children":["233b0597-f38e-b443-5a8d-e71327169c6e"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"233b0597-f38e-b443-5a8d-e71327169c6e","text":true,"v":"Oldest"}],"styles":[{"_id":"27c8fbbd-6d4a-dfbe-616e-02b43181a956","fake":false,"type":"class","name":"input-text","namespace":"","comb":"","styleLess":"padding-top: 0.25rem; padding-right: 0.75rem; padding-bottom: 0.25rem; padding-left: 0.5rem; color: black;","variants":{"medium":{"styleLess":"width: 100%;"}},"children":[],"createdBy":"5f5426c67b8067b6b7bc9172","origin":null,"selector":null},{"_id":"27c8fbbd-6d4a-dfbe-616e-02b43181a959","fake":false,"type":"class","name":"sort_input-select","namespace":"","comb":"","styleLess":"width: 100%; padding-top: 0.25rem; padding-right: 0.75rem; padding-bottom: 0.25rem; padding-left: 0.25rem; color: black;","variants":{},"children":[],"createdBy":"5f5426c67b8067b6b7bc9172","origin":null,"selector":null},{"_id":"27c8fbbd-6d4a-dfbe-616e-02b43181a95b","fake":false,"type":"class","name":"input-select","namespace":"","comb":"","styleLess":"padding-top: 0.25rem; padding-right: 0.75rem; padding-bottom: 0.25rem; padding-left: 0.25rem; color: black;","variants":{"medium":{"styleLess":"width: 100%;"}},"children":[],"createdBy":"5f5426c67b8067b6b7bc9172","origin":null,"selector":null},{"_id":"27c8fbbd-6d4a-dfbe-616e-02b43181a95c","fake":false,"type":"class","name":"checkbox-wrapper","namespace":"","comb":"","styleLess":"justify-content: center; align-items: center; grid-column-gap: 0.25rem; grid-row-gap: 0.25rem;","variants":{},"children":[],"createdBy":"5f5426c67b8067b6b7bc9172","origin":null,"selector":null},{"_id":"27c8fbbd-6d4a-dfbe-616e-02b43181a957","fake":false,"type":"class","name":"checkboxes-wrapper","namespace":"","comb":"","styleLess":"grid-column-gap: 1.5rem; grid-row-gap: 1.5rem;","variants":{"small":{"styleLess":"flex-direction: column; flex-wrap: nowrap;"}},"children":[],"createdBy":"5f5426c67b8067b6b7bc9172","origin":null,"selector":null},{"_id":"ab3659cf-9fb9-8b37-76fd-c5f8804de306","fake":false,"type":"class","name":"filters_component","namespace":"","comb":"","styleLess":"display: flex; width: 100%; flex-direction: column; flex-wrap: nowrap; grid-column-gap: 1rem; grid-row-gap: 1rem;","variants":{},"children":[],"createdBy":"5f5426c67b8067b6b7bc9172","origin":null,"selector":null},{"_id":"27c8fbbd-6d4a-dfbe-616e-02b43181a958","fake":false,"type":"class","name":"filters","namespace":"","comb":"","styleLess":"display: flex; width: 100%; padding-top: 0.5rem; padding-right: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.5rem; justify-content: space-between; align-items: center; grid-column-gap: 2rem; grid-row-gap: 2rem; background-color: hsla(0, 0.00%, 55.52%, 1.00);","variants":{"medium":{"styleLess":"z-index: 999; width: 50%; margin-right: auto; margin-left: auto; flex-direction: column; flex-wrap: nowrap; grid-column-gap: 1.5rem; grid-row-gap: 1.5rem;"},"small":{"styleLess":"min-width: 15rem;"},"tiny":{"styleLess":"width: 90%; min-width: 0rem;"}},"children":[],"createdBy":"5f5426c67b8067b6b7bc9172","origin":null,"selector":null},{"_id":"27c8fbbd-6d4a-dfbe-616e-02b43181a95d","fake":false,"type":"class","name":"label","namespace":"","comb":"","styleLess":"margin-bottom: 0px; font-weight: 400;","variants":{},"children":[],"createdBy":"5f5426c67b8067b6b7bc9172","origin":null,"selector":null},{"_id":"27c8fbbd-6d4a-dfbe-616e-02b43181a95a","fake":false,"type":"class","name":"sort","namespace":"","comb":"","styleLess":"display: flex; width: 100%; padding-right: 0rem; padding-left: 0rem; justify-content: space-between; align-items: center;","variants":{},"children":[],"createdBy":"5f5426c67b8067b6b7bc9172","origin":null,"selector":null},{"_id":"27c8fbbd-6d4a-dfbe-616e-02b43181a955","fake":false,"type":"class","name":"checkbox","namespace":"","comb":"","styleLess":"width: 1rem; height: 1rem; color: black;","variants":{},"children":[],"createdBy":"5f5426c67b8067b6b7bc9172","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Copy