Hi! Here is a Flip card in Sitejet (my first reusable block)
Block data - to import this in SiteJet
- Copy the Block data (from below) into Clipboard,
- Go to your project in the SiteJet CMS and press on the Import → SiteJet from th Bookmark Bar (Read more here)
- A modal will appear, Paste the data inside the input field and press OK
- Now, if everything went well the data will be decoded and placed in SiteJet Clipboard format
- Use the Paste option from SiteJet to place the block where you need
- Copy CSS (or additional code) by selecting the CSS below and then Paste the (S)CSS in SiteJet → CSS panel
Block data
eyJjb250ZW50cyI6W3sic291cmNlIjp7ImlkIjoiNjQ5MjEzNjMiLCJwYWdlIjoyMjQ0NjgzLCJ3ZWJjYXJkIjozMjk1MTUsImxhbmd1YWdlIjoiZW4ifSwidHlwZSI6ImNvbnRhaW5lciIsImNvbnRlbnQiOiI8ZGl2IGNsYXNzPVwiZWQtZWxlbWVudCBlZC1jb250YWluZXIgd3YtYm94ZWQgd3Ytc3BhY2VyIHByZXNldC1jb2x1bW5zLXRocmVlLXYyLWRlZmF1bHRcIiBzdHlsZT1cIlwiIGRhdGEtZnJvbS1wcmVzZXQ9XCJjb2x1bW5zLXRocmVlLXYyXCIgZGF0YS1taW4tY291bnQ9XCIxXCIgZGF0YS1tYXgtY291bnQ9XCIxXCIgZGF0YS1tYXBwYWJsZT1cIjFcIiBkYXRhLW9yaWdpbj1cIjY0OTIxMzYzXCIgPjxkaXYgY2xhc3M9XCJpbm5lclwiPjxkaXYgY2xhc3M9XCJlZC1lbGVtZW50IGVkLWNvbnRhaW5lciBjb2x1bW5zLWJveCB3di1vdmVyZmxvd192aXNpYmxlXCIgc3R5bGU9XCJcIiBkYXRhLWZyb20tcHJlc2V0PVwiXCIgZGF0YS1taW4tY291bnQ9XCIxXCIgZGF0YS1tYXgtY291bnQ9XCI5OVwiIGRhdGEtbWFwcGFibGU9XCIxXCIgPjxkaXYgY2xhc3M9XCJpbm5lclwiPjxkaXYgY2xhc3M9XCJlZC1lbGVtZW50IGVkLWNvbnRhaW5lciBmbGlwLWNhcmRcIiBkYXRhLW1heC1jb3VudD1cIjFcIiBkYXRhLW1pbi1jb3VudD1cIjFcIiBkYXRhLW1hcHBhYmxlPVwidHJ1ZVwiID48ZGl2IGNsYXNzPVwiaW5uZXJcIj48ZGl2IGNsYXNzPVwiZWQtZWxlbWVudCBlZC1jb250YWluZXIgZmxpcC1jYXJkLWZyb250IGZ1bGwtd2lkdGggd3YtYm94ZWRcIiBkYXRhLW1heC1jb3VudD1cIjFcIiBkYXRhLW1pbi1jb3VudD1cIjFcIiBkYXRhLW1hcHBhYmxlPVwidHJ1ZVwiIHN0eWxlPVwiYmFja2dyb3VuZC1jb2xvcjogcmdiKDI0OSwgMjIxLCAyMDUpO1wiID48ZGl2IGNsYXNzPVwiaW5uZXJcIj48ZGl2IGNsYXNzPVwiZWQtZWxlbWVudCBlZC1oZWFkbGluZSBjdXN0b20tdGhlbWVcIiBkYXRhLW1heC1jb3VudD1cIjFcIiBkYXRhLW1pbi1jb3VudD1cIjFcIiBkYXRhLW9yaWdpbj1cIjY0OTIxMzg4XCIgZGF0YS1tYXBwYWJsZT1cInRydWVcIiA+PGgyPkZyb250PC9oMj48c3R5bGU+I2VkLW5ldy0yNzk4IGgyIHsgdGV4dC1hbGlnbjogY2VudGVyOyB9PC9zdHlsZT48L2Rpdj48ZGl2IGNsYXNzPVwiZWQtZWxlbWVudCBlZC10ZXh0IGN1c3RvbS10aGVtZVwiIGRhdGEtbWF4LWNvdW50PVwiMVwiIGRhdGEtbWluLWNvdW50PVwiMVwiIGRhdGEtbWFwcGFibGU9XCJ0cnVlXCIgPjxwIHN0eWxlPVwidGV4dC1hbGlnbjogY2VudGVyO1wiPlRoaXMgaXMgdGhlIGZyb250PC9wPjwvZGl2PjwvZGl2PjxzdHlsZT4jZWQtbmV3LTI3OTcgPiAuaW5uZXIgeyBwbGFjZS1jb250ZW50OiBjZW50ZXI7IH0gI2VkLW5ldy0yNzk3IHsgbWluLWhlaWdodDogMzAwcHg7IH08L3N0eWxlPjwvZGl2PjxkaXYgY2xhc3M9XCJlZC1lbGVtZW50IGVkLWNvbnRhaW5lciBmbGlwLWNhcmQtYmFjayBmdWxsLXdpZHRoIHd2LWJveGVkXCIgZGF0YS1tYXgtY291bnQ9XCIxXCIgZGF0YS1taW4tY291bnQ9XCIxXCIgZGF0YS1tYXBwYWJsZT1cInRydWVcIiBzdHlsZT1cImJhY2tncm91bmQtY29sb3I6IHJnYigyMzcsIDIzNywgMjM3KTtcIiA+PGRpdiBjbGFzcz1cImlubmVyXCI+PGRpdiBjbGFzcz1cImVkLWVsZW1lbnQgZWQtaGVhZGxpbmUgY3VzdG9tLXRoZW1lXCIgZGF0YS1tYXgtY291bnQ9XCIxXCIgZGF0YS1taW4tY291bnQ9XCIxXCIgZGF0YS1tYXBwYWJsZT1cInRydWVcIiA+PGgyPkJhY2s8L2gyPjxzdHlsZT4jZWQtbmV3LTI4MDEgaDIgeyB0ZXh0LWFsaWduOiBjZW50ZXI7IH08L3N0eWxlPjwvZGl2PjxkaXYgY2xhc3M9XCJlZC1lbGVtZW50IGVkLXRleHQgY3VzdG9tLXRoZW1lXCIgZGF0YS1tYXgtY291bnQ9XCIxXCIgZGF0YS1taW4tY291bnQ9XCIxXCIgZGF0YS1tYXBwYWJsZT1cInRydWVcIiA+PHAgc3R5bGU9XCJ0ZXh0LWFsaWduOiBjZW50ZXI7XCI+VGhpcyBpcyB0aGUgYmFjazwvcD48L2Rpdj48L2Rpdj48c3R5bGU+I2VkLW5ldy0yODAwID4gLmlubmVyIHsgYWxpZ24tY29udGVudDogY2VudGVyOyB9ICNlZC1uZXctMjgwMCB7IG1pbi1oZWlnaHQ6IDMwMHB4OyB9PC9zdHlsZT48L2Rpdj48L2Rpdj48L2Rpdj48L2Rpdj48L2Rpdj48ZGl2IGNsYXNzPVwiZWQtZWxlbWVudCBlZC1jb250YWluZXIgY29sdW1ucy1ib3ggd3Ytb3ZlcmZsb3dfdmlzaWJsZVwiIHN0eWxlPVwiXCIgZGF0YS1mcm9tLXByZXNldD1cIlwiIGRhdGEtbWluLWNvdW50PVwiMVwiIGRhdGEtbWF4LWNvdW50PVwiOTlcIiBkYXRhLW1hcHBhYmxlPVwiMVwiIGRhdGEtb3JpZ2luPVwiNjQ5MjEzNjZcIiA+PGRpdiBjbGFzcz1cImlubmVyXCI+PGRpdiBjbGFzcz1cImVkLWVsZW1lbnQgZWQtZHVtbXlcIiBzdHlsZT1cImNvbG9yOiByZ2IoNTEsIDUxLCA1MSk7IGJvcmRlcjogM3B4IGRhc2hlZCByZ2IoMjA3LCAyMDcsIDIwNyk7IG1hcmdpbjogMHB4OyBwYWRkaW5nOiAyMHB4IDEwJTsgb3ZlcmZsb3c6IGhpZGRlbjsgZm9udC1zaXplOiAxNnB4OyB0ZXh0LWFsaWduOiBjZW50ZXI7IGZvbnQtZmFtaWx5OiBBcmlhbCwgc2Fucy1zZXJpZjsgbGluZS1oZWlnaHQ6IDIwcHg7IHRleHQtc2hhZG93OiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNSkgMXB4IDBweCwgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjUpIDBweCAxcHgsIHJnYmEoMjU1LCAyNTUsIDI1NSwgMC41KSAtMXB4IDBweCwgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjUpIDBweCAtMXB4OyB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpczsgdGV4dC10cmFuc2Zvcm06IG5vbmU7IGxldHRlci1zcGFjaW5nOiAwcHg7IGZvbnQtc3R5bGU6IG5vcm1hbDsgZm9udC13ZWlnaHQ6IDQwMDtcIj5Ecm9wIGNvbnRlbnQgaGVyZTxzcGFuIHN0eWxlPVwiZGlzcGxheTpibG9jazsgbWFyZ2luOiAxMHB4IDA7Zm9udC1zaXplOiAwLjg1ZW07XCI+b3I8L3NwYW4+PHNwYW4gY2xhc3M9XCJ3di1hZGQtZWxlbWVudFwiIHN0eWxlPVwiZGlzcGxheTogaW5saW5lLWZsZXg7IHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjsgYWxpZ24taXRlbXM6IGNlbnRlcjsgY3Vyc29yOiBwb2ludGVyOyBwb2ludGVyLWV2ZW50czogYXV0bzsgYmFja2dyb3VuZDogcmdiYSgwLDAsMCwwLjA1KTsgYm9yZGVyLXJhZGl1czogMjRweDsgbWFyZ2luOiA0cHg7IHBhZGRpbmc6IDRweCA4cHg7IGZvbnQtc2l6ZTogMC44NWVtO1wiPjxpIGNsYXNzPVwiZmEgZmEtcGx1c1wiPjwvaT4mbmJzcDtBZGQgY29udGVudDwvc3Bhbj48c3BhbiBjbGFzcz1cInd2LXBhc3RlXCIgc3R5bGU9XCJkaXNwbGF5OiBpbmxpbmUtZmxleDsgcGxhY2UtY29udGVudDogY2VudGVyOyBhbGlnbi1pdGVtczogY2VudGVyOyBjdXJzb3I6IHBvaW50ZXI7IHBvaW50ZXItZXZlbnRzOiBhdXRvO2JhY2tncm91bmQ6IHJnYmEoMCwwLDAsMC4wNSk7IGJvcmRlci1yYWRpdXM6IDI0cHg7IG1hcmdpbjogNHB4OyBwYWRkaW5nOiA0cHggOHB4OyBmb250LXNpemU6IDAuODVlbTtcIj48aSBjbGFzcz1cImZhIGZhLWNsaXBib2FyZFwiPjwvaT4mbmJzcDtQYXN0ZSBjbGlwYm9hcmQ8L3NwYW4+PC9kaXY+PC9kaXY+PC9kaXY+PGRpdiBjbGFzcz1cImVkLWVsZW1lbnQgZWQtY29udGFpbmVyIGNvbHVtbnMtYm94IHd2LW92ZXJmbG93X3Zpc2libGVcIiBzdHlsZT1cIlwiIGRhdGEtZnJvbS1wcmVzZXQ9XCJcIiBkYXRhLW1pbi1jb3VudD1cIjFcIiBkYXRhLW1heC1jb3VudD1cIjk5XCIgZGF0YS1tYXBwYWJsZT1cIjFcIiBkYXRhLW9yaWdpbj1cIjY0OTIxMzY2XCIgPjxkaXYgY2xhc3M9XCJpbm5lclwiPjxkaXYgY2xhc3M9XCJlZC1lbGVtZW50IGVkLWR1bW15XCIgc3R5bGU9XCJjb2xvcjogcmdiKDUxLCA1MSwgNTEpOyBib3JkZXI6IDNweCBkYXNoZWQgcmdiKDIwNywgMjA3LCAyMDcpOyBtYXJnaW46IDBweDsgcGFkZGluZzogMjBweCAxMCU7IG92ZXJmbG93OiBoaWRkZW47IGZvbnQtc2l6ZTogMTZweDsgdGV4dC1hbGlnbjogY2VudGVyOyBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7IGxpbmUtaGVpZ2h0OiAyMHB4OyB0ZXh0LXNoYWRvdzogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjUpIDFweCAwcHgsIHJnYmEoMjU1LCAyNTUsIDI1NSwgMC41KSAwcHggMXB4LCByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNSkgLTFweCAwcHgsIHJnYmEoMjU1LCAyNTUsIDI1NSwgMC41KSAwcHggLTFweDsgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7IHRleHQtdHJhbnNmb3JtOiBub25lOyBsZXR0ZXItc3BhY2luZzogMHB4OyBmb250LXN0eWxlOiBub3JtYWw7IGZvbnQtd2VpZ2h0OiA0MDA7XCI+RHJvcCBjb250ZW50IGhlcmU8c3BhbiBzdHlsZT1cImRpc3BsYXk6YmxvY2s7IG1hcmdpbjogMTBweCAwO2ZvbnQtc2l6ZTogMC44NWVtO1wiPm9yPC9zcGFuPjxzcGFuIGNsYXNzPVwid3YtYWRkLWVsZW1lbnRcIiBzdHlsZT1cImRpc3BsYXk6IGlubGluZS1mbGV4OyBwbGFjZS1jb250ZW50OiBjZW50ZXI7IGFsaWduLWl0ZW1zOiBjZW50ZXI7IGN1cnNvcjogcG9pbnRlcjsgcG9pbnRlci1ldmVudHM6IGF1dG87IGJhY2tncm91bmQ6IHJnYmEoMCwwLDAsMC4wNSk7IGJvcmRlci1yYWRpdXM6IDI0cHg7IG1hcmdpbjogNHB4OyBwYWRkaW5nOiA0cHggOHB4OyBmb250LXNpemU6IDAuODVlbTtcIj48aSBjbGFzcz1cImZhIGZhLXBsdXNcIj48L2k+Jm5ic3A7QWRkIGNvbnRlbnQ8L3NwYW4+PHNwYW4gY2xhc3M9XCJ3di1wYXN0ZVwiIHN0eWxlPVwiZGlzcGxheTogaW5saW5lLWZsZXg7IHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjsgYWxpZ24taXRlbXM6IGNlbnRlcjsgY3Vyc29yOiBwb2ludGVyOyBwb2ludGVyLWV2ZW50czogYXV0bztiYWNrZ3JvdW5kOiByZ2JhKDAsMCwwLDAuMDUpOyBib3JkZXItcmFkaXVzOiAyNHB4OyBtYXJnaW46IDRweDsgcGFkZGluZzogNHB4IDhweDsgZm9udC1zaXplOiAwLjg1ZW07XCI+PGkgY2xhc3M9XCJmYSBmYS1jbGlwYm9hcmRcIj48L2k+Jm5ic3A7UGFzdGUgY2xpcGJvYXJkPC9zcGFuPjwvZGl2PjwvZGl2PjwvZGl2PjwvZGl2PjwvZGl2PiIsInNvcnQiOjB9LHsic291cmNlIjp7ImlkIjoiNjQ5MjEzNzMiLCJwYWdlIjoyMjQ0NjgzLCJ3ZWJjYXJkIjozMjk1MTUsImxhbmd1YWdlIjoiZW4ifSwidHlwZSI6ImNvbnRhaW5lciIsImNvbnRlbnQiOiI8ZGl2IGNsYXNzPVwiZWQtZWxlbWVudCBlZC1jb250YWluZXIgZmxpcC1jYXJkXCIgZGF0YS1tYXgtY291bnQ9XCIxXCIgZGF0YS1taW4tY291bnQ9XCIxXCIgZGF0YS1tYXBwYWJsZT1cInRydWVcIiAgZGF0YS1vcmlnaW49XCI2NDkyMTM3M1wiPjxkaXYgY2xhc3M9XCJpbm5lclwiPjxkaXYgY2xhc3M9XCJlZC1lbGVtZW50IGVkLWNvbnRhaW5lciBmbGlwLWNhcmQtZnJvbnQgZnVsbC13aWR0aCB3di1ib3hlZFwiIGRhdGEtbWF4LWNvdW50PVwiMVwiIGRhdGEtbWluLWNvdW50PVwiMVwiIGRhdGEtbWFwcGFibGU9XCJ0cnVlXCIgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMjQ5LCAyMjEsIDIwNSk7XCIgPjxkaXYgY2xhc3M9XCJpbm5lclwiPjxkaXYgY2xhc3M9XCJlZC1lbGVtZW50IGVkLWhlYWRsaW5lIGN1c3RvbS10aGVtZVwiIGRhdGEtbWF4LWNvdW50PVwiMVwiIGRhdGEtbWluLWNvdW50PVwiMVwiIGRhdGEtb3JpZ2luPVwiNjQ5MjEzODhcIiBkYXRhLW1hcHBhYmxlPVwidHJ1ZVwiID48aDI+RnJvbnQ8L2gyPjxzdHlsZT4jZWQtbmV3LTI3ODkgaDIgeyB0ZXh0LWFsaWduOiBjZW50ZXI7IH08L3N0eWxlPjwvZGl2PjxkaXYgY2xhc3M9XCJlZC1lbGVtZW50IGVkLXRleHQgY3VzdG9tLXRoZW1lXCIgZGF0YS1tYXgtY291bnQ9XCIxXCIgZGF0YS1taW4tY291bnQ9XCIxXCIgZGF0YS1tYXBwYWJsZT1cInRydWVcIiA+PHAgc3R5bGU9XCJ0ZXh0LWFsaWduOiBjZW50ZXI7XCI+VGhpcyBpcyB0aGUgZnJvbnQ8L3A+PC9kaXY+PC9kaXY+PHN0eWxlPiNlZC1uZXctMjc4OCA+IC5pbm5lciB7IHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjsgfSAjZWQtbmV3LTI3ODggeyBtaW4taGVpZ2h0OiAzMDBweDsgfTwvc3R5bGU+PC9kaXY+PGRpdiBjbGFzcz1cImVkLWVsZW1lbnQgZWQtY29udGFpbmVyIGZsaXAtY2FyZC1iYWNrIGZ1bGwtd2lkdGggd3YtYm94ZWRcIiBkYXRhLW1heC1jb3VudD1cIjFcIiBkYXRhLW1pbi1jb3VudD1cIjFcIiBkYXRhLW1hcHBhYmxlPVwidHJ1ZVwiIHN0eWxlPVwiYmFja2dyb3VuZC1jb2xvcjogcmdiKDIzNywgMjM3LCAyMzcpO1wiID48ZGl2IGNsYXNzPVwiaW5uZXJcIj48ZGl2IGNsYXNzPVwiZWQtZWxlbWVudCBlZC1oZWFkbGluZSBjdXN0b20tdGhlbWVcIiBkYXRhLW1heC1jb3VudD1cIjFcIiBkYXRhLW1pbi1jb3VudD1cIjFcIiBkYXRhLW1hcHBhYmxlPVwidHJ1ZVwiID48aDI+QmFjazwvaDI+PHN0eWxlPiNlZC1uZXctMjc5MiBoMiB7IHRleHQtYWxpZ246IGNlbnRlcjsgfTwvc3R5bGU+PC9kaXY+PGRpdiBjbGFzcz1cImVkLWVsZW1lbnQgZWQtdGV4dCBjdXN0b20tdGhlbWVcIiBkYXRhLW1heC1jb3VudD1cIjFcIiBkYXRhLW1pbi1jb3VudD1cIjFcIiBkYXRhLW1hcHBhYmxlPVwidHJ1ZVwiID48cCBzdHlsZT1cInRleHQtYWxpZ246IGNlbnRlcjtcIj5UaGlzIGlzIHRoZSBiYWNrPC9wPjwvZGl2PjwvZGl2PjxzdHlsZT4jZWQtbmV3LTI3OTEgPiAuaW5uZXIgeyBhbGlnbi1jb250ZW50OiBjZW50ZXI7IH0gI2VkLW5ldy0yNzkxIHsgbWluLWhlaWdodDogMzAwcHg7IH08L3N0eWxlPjwvZGl2PjwvZGl2PjwvZGl2PiIsInNvcnQiOjJ9XSwiaGFzUHJlc2V0Ijp0cnVlfQ==
Custom CSS
//Flip card
body:not(.edit) {
.flip-card {
background-color: transparent;
width: 100%;
height: 300px; // Same size as the side
perspective: 1000px; // Remove this if you don't want the 3D effect
overflow: visible;
position: relative;
// This container is needed to position the front and back side
.inner {
position: relative;
transition: transform 0.8s;
transform-style: preserve-3d;
}
&:hover {
> .inner {
// Do an horizontal flip when you move the mouse over the flip box container
transform: rotateY(180deg);
}
}
// Position the front and back side
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; //Safari
backface-visibility: hidden;
> .inner {
width: 100%;
height: 100%;
//Align inner content
display: flex;
align-items: center;
justify-content: center;
}
}
//Style the front side
.flip-card-front {
}
//Style the back side
.flip-card-back {
transform: rotateY(180deg);
}
}
}
