<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="jsx-4214145247 thumbnails-list-component" style=""> <a class="background-image-thumbnail-item-component" href="" target="_blank"> <div class="image-container" style="background-image: url(https://monday.com/static/uploads/JeremyKaiser/slack.jpg);"></div> <div class="text-container"> <div class="thumbnail-title-wrapper"> <div class="thumbnail-title">Slack <!-- --> <span class="thumbnail-title-decorator"></span> </div> </div> <div class="thumbnail-subtitle">Transform messages into tasks</div> </div> </a> <a class="background-image-thumbnail-item-component" href="" target="_blank"> <div class="image-container" style="background-image: url(https://monday.com/static/uploads/JeremyKaiser/googledrive.jpg);"></div> <div class="text-container"> <div class="thumbnail-title-wrapper"> <div class="thumbnail-title">Google Drive <!-- --> <span class="thumbnail-title-decorator"></span> </div> </div> <div class="thumbnail-subtitle">Upload any file</div> </div> </a> <a class="background-image-thumbnail-item-component" href="" target="_blank"> <div class="image-container" style="background-image: url(https://monday.com/static/uploads/JeremyKaiser/trello.jpg);"></div> <div class="text-container"> <div class="thumbnail-title-wrapper"> <div class="thumbnail-title">Trello <!-- --> <span class="thumbnail-title-decorator"></span> </div> </div> <div class="thumbnail-subtitle">Get the high level</div> </div> </a> <a class="background-image-thumbnail-item-component" href="" target="_blank"> <div class="image-container" style="background-image: url("https://monday.com/static/uploads/JeremyKaiser/asana.jpg");"></div> <div class="text-container"> <div class="thumbnail-title-wrapper"> <div class="thumbnail-title">Asana <!-- --> <span class="thumbnail-title-decorator"></span> </div> </div> <div class="thumbnail-subtitle">Sync between both</div> </div> </a> <a class="background-image-thumbnail-item-component" href="https://support.monday.com/hc/en-us/articles/360001362725-How-can-I-integrate-my-board-with-my-calendar-" target="_blank"> <div class="image-container" style="background-image: url(https://monday.com/static/uploads/JeremyKaiser/googlecalendar.jpg);"></div> <div class="text-container"> <div class="thumbnail-title-wrapper"> <div class="thumbnail-title">Google Calendar <!-- --> <span class="thumbnail-title-decorator"></span> </div> </div> <div class="thumbnail-subtitle">Sync your calendar</div> </div> </a> <a class="background-image-thumbnail-item-component" href="https://monday.com/integrations/jira" target="_blank"> <div class="image-container" style="background-image: url(https://monday.com/static/uploads/JeremyKaiser/jira.jpg);"></div> <div class="text-container"> <div class="thumbnail-title-wrapper"> <div class="thumbnail-title">Jira <!-- --> <span class="thumbnail-title-decorator"></span> </div> </div> <div class="thumbnail-subtitle">Make it more visual</div> </div> </a> <a class="background-image-thumbnail-item-component" href="https://support.monday.com/hc/en-us/articles/115005339505-How-do-I-upload-files-and-attachments-in-monday-com-" target="_blank"> <div class="image-container" style="background-image: url(https://monday.com/static/uploads/JeremyKaiser/dropbox.jpg);"></div> <div class="text-container"> <div class="thumbnail-title-wrapper"> <div class="thumbnail-title">Dropbox <!-- --> <span class="thumbnail-title-decorator"></span> </div> </div> <div class="thumbnail-subtitle">Upload any file</div> </div> </a> <a class="background-image-thumbnail-item-component" href="https://support.monday.com/hc/en-us/articles/360000219209-How-to-import-and-export-to-Excel-" target="_blank"> <div class="image-container" style="background-image: url(https://monday.com/static/uploads/JeremyKaiser/excel.jpg);"></div> <div class="text-container"> <div class="thumbnail-title-wrapper"> <div class="thumbnail-title">Excel <!-- --> <span class="thumbnail-title-decorator"></span> </div> </div> <div class="thumbnail-subtitle">Import and export</div> </div> </a> </div>

/*! CSS Used from: Embedded */ .background-image-thumbnail-item-component { position: relative; height: 320px; width: 300px; overflow: hidden; margin: 20px; border-radius: 4px; background-color: #fff; -webkit-transition: 0.2s ease-in-out all; transition: 0.2s ease-in-out all; -webkit-text-decoration: none; text-decoration: none; cursor: pointer; } .background-image-thumbnail-item-component .image-container { height: 240px; background-size: cover; background-position: center; opacity: 1; -webkit-transition: 0.2s opacity ease; transition: 0.2s opacity ease; } .background-image-thumbnail-item-component .text-container { position: absolute; bottom: 0; height: calc(320px - 240px); overflow: hidden; padding: 0 24px; -webkit-transition: 0.2s height ease; transition: 0.2s height ease; color: #333; background-color: #fff; } .background-image-thumbnail-item-component .text-container .thumbnail-title-wrapper { height: 100%; width: 252px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; margin-bottom: 8px; } .background-image-thumbnail-item-component .text-container .thumbnail-title-wrapper .thumbnail-title { font-size: 24px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .background-image-thumbnail-item-component .text-container .thumbnail-title-wrapper .thumbnail-title-decorator { color: #808080; font-size: 16px; } .background-image-thumbnail-item-component .text-container .thumbnail-subtitle { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: 14px; line-height: 20px; margin-bottom: 8px; } .background-image-thumbnail-item-component:hover .image-container { opacity: 0.5; } .background-image-thumbnail-item-component:hover .text-container { height: 120px; padding: 0 24px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .background-image-thumbnail-item-component:hover .text-container .thumbnail-title-wrapper { height: auto; } /*! CSS Used from: Embedded */ .thumbnails-list-component.jsx-4214145247 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-left: 20px; margin-right: 20px; max-width: 1400px; margin: auto; margin-bottom: 70px; } /*! CSS Used from: Embedded */ * { font-family: "Roboto","Helvetica","Arial",sans-serif; box-sizing: border-box; font-weight: 300; outline: none; } a { cursor: pointer; } /*! CSS Used from: Embedded */ a { background-color: transparent; -webkit-text-decoration-skip: objects; } /*! CSS Used from: chrome-extension://bfbameneiokkgbdmiekhjnmfkcnldhhm/features/style-sheets/before.css */ *:before { background: transparent!important; border: none!important; -webkit-box-shadow: none!important; -moz-box-shadow: none!important; box-shadow: none!important; clear: none!important; float: none!important; font-style: normal!important; font-variant: normal!important; font-weight: normal!important; height: auto!important; letter-spacing: 0!important; line-height: 1!important; margin: 0!important; opacity: 1!important; padding: 0!important; position: static!important; text-align: left!important; text-decoration: none!important; text-shadow: none!important; text-transform: none!important; width: auto!important; } *:before { background: #b94a48!important; -webkit-border-radius: 3px!important; -moz-border-radius: 3px!important; border-radius: 3px!important; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3)!important; -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3)!important; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3)!important; margin: 1px!important; padding: 1px!important; z-index: 2147483647!important; } *:before { color: #fff!important; display: inline!important; font-family: Monaco, Menlo, Consolas, "Courier New", monospace!important; font-size: 13px!important; line-height: 15px!important; } /*! CSS Used fontfaces */ @font-face { font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxMIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxEIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+1F00-1FFF; } @font-face { font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxLIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+0370-03FF; } @font-face { font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxHIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } @font-face { font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxGIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxIIzIXKMny.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF; } @font-face { font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF; } @font-face { font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } @font-face { font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+1F00-1FFF; } @font-face { font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0370-03FF; } @font-face { font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } @font-face { font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF; } @font-face { font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF; } @font-face { font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } @font-face { font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }