@nexxtmove/ui 2.6.0 → 2.8.0

package/src/components/molecules/TemplateCard/TemplateCard.stories.ts

@@ -0,0 +1,327 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import NexxtButton from '../../atoms/Button/Button.vue'
+import TemplateCard from './TemplateCard.vue'
+
+const PREVIEW_URLS = [
+  'https://static.mylead.nl/page-thumbnails/2bDS0qAxHBOh_qbow5QJh.webp?t=1742221892778',
+  'https://static.mylead.nl/page-thumbnails/VIZHqWS8BrBrmZFg.webp?t=1746783881745',
+  'data:image/webp;base64,UklGRsAzAABXRUJQVlA4WAoAAAAgAAAAVwIAKwEASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDhM0jEAAC9XwkoADXUhov/BIpC0hX6PiID9XygL2Lafc2PdM1HdtEntpm7Xe521bdv2Ybm2bdu2bdtWbcUz/yv5/yeZqFfyX5yIgMS2kSOp0Y1JNXuePFPB1ff1tW3b8rbVtq2XdMlsuXWYoR3DGabgYGZmZmZmmBvjB3RyzDJjmZnCHCucLHaYjAHFlnQt8SXLraIGNEiWJNumbeVY+1zbeO99uf+dsW0be9C2bWt528zvZ2HMvgxKff9n4Va945pEtfDXd8IVJElNdS8Axj2WHNTyk9q2bWvb5pRkxnDG8Knc//9DxkxhTupaJvlwaiuvNdTokGDbtto2WyxzmHH+syqabUVolm3btto285qtmu0wlgKjT/3/L2Bm5jBJMoPCFSJJrgIv4Ru0TC9n/fKAbduzJ9G2rZDeIAOBgFLCSAk2aqQ7gMPYpUnv9oWHZ+xdp/eiz3Tr876W0FvoCEgQkGqBiCSAIBjpDL0mMQu5rvsOU3AZ8rSIkAXZdts26hU+71EJyyWBB7y/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBCk06l0IxWjRoHzhCRIEhCAAAAA0KZvQRCk0xWjRxw5Iq4D08bmdBKmKkiHcakafCOjlSQRsSZF7urAygqKHCXt1YFVlaVBsbVKYDSrC6P6YK9WLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQZbBWu+xjv4r8crV/fDzXYahfnD+ird2BS83oIjX8irZHB2y5MQz/5ZU390GjenTYkQ9NuJznzX9nMut31dPZkun3Oa/PmcvdiYNq6/VB26PD8EaR+hcEEBFJCTEptHOq3cbz7aY6VWEk+hdDr5qW01N7Fz2ZnzPc9f9b+/Rbx/39jivDoc1yy/VhFADy0lo3uaZX5WVSaDlpWH1OVZUxCv/T0Kum5fTU3kXPmJ/vIDPPO8avHff2PVe67EoqwjGqyKYETug29Uq8yFta32eYMVnU96MZLLMKxWZXFxXd1vUu+abZ2T/Wu7rkfk2jfqVlTrG6t/mkVZYjqt4OX5+nwwY7O+m23pzreXYHjLqsxxS7TdpsF9jVyNWNb2FOQ6+blpNT+7zIZHahXYN9+/Rb+/1Dz5VBbjIByYjq4d5PzTGveKT3L8xyg6tpPfZmONhmVZZ7jZPNKTGUus12JFW2Rb+mr4N59n0ZrnFbKIlpjts7neFwOi0utjid9mVeT2mPGoTNA5rWnFPy5l69PK9z7KsaP5FIRLPhV3X67NzeRc+YX2iX+T9vX/zWfn+fudxNgNKvGU3xMm/nldmU+zs6o12ZVa7poTyMtOo1XJVlWv+o+1PaSIqS+jqcn32XzSZXhwxm5ZAx7TOcnUNOikCUFAHiJV5XWT7gcZVlUk6IrLK6YQaN9Mlp9Htx4Ws1/LJOn5/bu8iYnTfo+f9d5/hlycPjgYstAHVO+eK8BY1HPCzPKi8FzMxxqw/HdAcyGlXU57LL5JiuwSVXC7IDChzVndAe0zW0X5j9EtuscrOr5VYXlL2GRwwiCaRQJOM+j6GcFAFEVeMXDMFCcilaLx77n3fZ7+XIm7rl7NSR3zKd5VrW5tQ5fml7eAACUe9yMeXq3i7Oe046YIROm0XepzvuNK11SYomfYfNHuOCtDi7+XabXdXIQaSaCynqXV6Z12H1dtO89IJuOrOZ4bClV43p0z2vzCrd81vybyia2786z0nRmEtKVDXkhrNTVIkhGFGYUzRDMKS9vzDfF6SAUD/9Yx8UEqzIKi+9MU+hjJwiEKE4q8JKy1HFRtc18vP8/2b/RVIoB7zW0zlVombk2G0dEMpqLEUkdWcdijd4enP+S4g35b9QvCX/pkST85vyXyiTXucpKaoakpgCQGJEDCDlPAFISo63q3MBGlwK1a8pJM1yuNE5KWrlGEYokiIUtTKQiBhDUdWzVi46QY1cbWmonXiWV+XlnAqN+hpRjKFB/6o8p0T1JLw2NLyiKDFsdSoBIUFa/yw1+I+RURQNvLcts7aioqJLYwEsf6lsxwaA+vqR/Xo3BPKb7x3YudXaaqMMW/KcRdcsMGKnTlliev3p8xoJe2rKE3tli+j3m9Zd79Pbf1mtIZhfeXz20FbsaPOq40oUK1K2JO6TC4veOub0fsHUX5eL3LBKPx5YVNUlAiNEUVGY+qp0xYKKhXQtmPPlmOJgYd7nRUNyKH+nX2VR0YcLx/X55qsxW5n+edeVE+8XdKsaFkWQX/j9CkVv3rvpEetdNDICquzdQUPeL1/t91/+kfNB5SqF5e/0qZy5WqddpvZ6J4TY06xP+lUsWi3vq99GDa6IYmoFDhPNqFweHXLW3v7+o06vXO2wgzbiy//tsuCDvmdFYDB1/OQ+k1buuN8FuR9W3zL+i/e2OH71XY+p2P35gZMSFp2c/9PFD77avvr02d+5Z/P/JMpWvvCyn8oOL4ki+LKivNfVj5Y+/GLJxFtnhlDOvXLw+EkVt935yaR/z1R0XZ+TS+enRt/y4l03RyDeUnrI3HYFXe+89s4OS4/cI4qpqNVXm0UpVUsNuCzJbskD35afnnvydacXuHvKum77NApjo0XnTF7hrg338eptk7d4eOWST87qNufU+R2OWn7miQu6hc/dc9KvT9riuNsvX6PP6UcPuOj7ia+r+s8qF0URDL3+jf/9NHnfww99QeXdIZSPVvjkw3mVn/2wwtPlD3Te//rjrHb+jVf8VLvZEYhfvlN9T+/9U789vduRV94/PYpp1dbfvGROJUmC8dhR/iHTC1Pzn9uYFauDiiXdA31FYaRfPmC54Lu1At0rgu+eOnvOJzvQN51MBp26VIbBSztu/2LVte31raa67OdDFZdaZ6+yDARDug7qMDPqkJ2OQFm65imvr+CFGWs+07VPp0Hzy43LH166MNzwIYWDOsys6jqwaPTn5RVP7K5bWRRT6042CMeTyQqKGrGUd/pseF4uvmm/AWucVvj1ZwUKBr6/b/q1IAojd/OlNx640qeB17qWX3lQYa/lxg+a8Uz7moDbWu/96INbt047r3720M5BUFDc89wn3hoRJBIZCGo2KIybSyQ/+D6QG4Eyqjj3iaOqL+05ot/0Gzt/tFf7ekN3+0+9ut8bXbt0Wf7Aczv2ylin9TeRTJwlT3yhkMtdPozT2wRJyhk3ojexGTvlFf1ntcQ2uw2dfVYibf/JO7Ybql8Exi95/xv/xCaXbpMsOfnt5yc4/ZAjB06dXCCkRwmngiC9/PgLFq94QA6JCeP3anfUaNJ1IAgJKoZtfecLJUEyAmVsquT1MRIji/ff8iZbHFkeoS2oa18fuM4to0vm9D1lyk4lp2X+fitvEA5zCoRUwtUh4gQ3dseXRyrjnOziZ4IIR9OGTyBN4pwOnv2xFkYI7CxX8Z8Qwdofhes9EspdJt3uLGnFz0nb/b0Qys3SPW/NAKAOBKPf5Ti8SwRK3lX4jI7nRLb6OekNvg130e2M+9D3u6/a/sg+Hdd7M8T0Ehv90ApcFNaiRKMiKrTxmnKatTezejf4q0vGFzxyeHULeT6Ed/ZEkIhyDVQel8qdPymTf6w1OIgc0GScE1VCw+6EtpLymBlv8ul0UB+h0pgpDzl6cFVjfX83j/t6MqzhBt9936J1NmlV6mJrDmd4v4gYL45dMi5zm25xn0E5f+ELWjqVqpepq8+RVLSYlpPMyUkna7lRIn9vUqjkb2VWCSSIg1TRGSthVdmOGBIUpiprP1Nqo7NbKIud6kTQPieoi3WnuqqlnwHt60FRZhmxFzIPSYuMvi8ZiusIKCclYVm6pIUfs6JU7YtlXWRO81v4TsjtWQ+M8pZeu0VhLKsOSYMunSjxZZPxSMQaPKxRpt4Wv+1tjFZZF6tcNnC6tk3rsmDL26ZjLeZ0avDbZQzl+x3OaYueSbHWIgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIhGDQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAg5CYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANDzMGQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQUnUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEB8KRIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB/jiEWKGgWlsfKOOKFJn9wc8C+9Pe/jKnFmtQ1LBFfsMuF5A+/NGUtLG5GpS1qFq9uypL665letkd+E3xlzC+LRTw+OrRrgt/I+4uaFbweioLyoCC/qebEGmq00rllAfnduyRjprZgdjrCvjazW894qSyZk844sefP7hErDRfWmoQya01fkWKkUlFVp8Z1YWGMVKrqsGCHOXviR5VZLOFon1unsbJTrFRy6ixd6vlA7RTzOFQUTavOhFBcT5s6rCE5q+IRh4qieVXRXE9du9eNZ0GwoKjtN+u5ftXp3otKqyTbd+lcjzdOtUVVcY9HTseeqeogJzenHmXsokqVC4tjnB+I/k5+Vvq0tKCsZhAvqT0i1u/yUD27pDDDoBQnmZXKQ0PlourIIFayglelI0mAypuoZxexRih2RmbxeYNip1JLrRUZpHJiprI4yARQGC8tr1xQAyFjckgiRgoKWrq4srquZKLxUHxQ2IGQBUuCunEs6BkHLauuKF1c2w+D+vLCppOxz7tcWUVZeXahsh1im5KhyZhdkc7S7z528bWv/zE7NZW9xr9mMtYZ/7U+Kvi6Y4NqJuMcZogZQUMC0CpjkPEG3ApnNajLG6G7amyzdEZVA8/2qf1zYxoXr5o1Gvwt8evA3DhmjfKa7E2N4LQ6rXdeIl5IQt6wt7W8TI6RVKO8+M3smJCuikduj/MaOyXdrD8tsS7HPFQQHZoy31N+vBH+2q8pvygTMccgGTuuEW/k0mwWwWfxBD3ur82jI2yxhJtznONtAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwZ6wPj//7/+HRKa5qxS2Vz6gO5uaW/49d/F2NjfL/2tkoq0iqL/3zPUWr4278dE+1ESkTGndx9mfde0wqSE29N6Hwtcwjt3fk4IfpHw6tUfVSd/d7sTLHbS9qe/nkg2dOJbHjyi9LE4a3eP1kLV37nP3/mxeW33JuTdy2uc17v7O5/+5PykdVlYjlCbe9pumJ93rXm/N5aUHHc3zSYd2us2+X10oKUcWcHvPpl/Fdklfckv5+9RGzywcUFmdXoXzg0Pg7M7bd9OH7q8tqPFe2Y0e1tYnDs+d/3Cmotvvcupo1g46h9PvozXYHi5r9NSWlSiVUgtdOvt1l3+kj/eoVnqq5pn2Psy/XeDut5AFW/Ppg3y0xH19ejxUn6jSdu+dE1Up4Pfec7/B6JEI2HUj4bgTFbyoDfDz4XNv/1V53quppF/9wTO2qjRCOtoxafdkLA6O1erL4kdxrKgF7KXdapRGq7O8/7AGL7mi0un7VwPWCR4Wnd90J7wyf1/211zs8X/u117s8NfOTn//s1BMHf5Tzy6yCZ2a93uWhmWt/cs/rbTaO+3nhzcee2vRU03pN09e+Nv/mXs+9WbUxG/1o57Kcw9+Z3fj7970z+Mc/eHD5eHwx5IYeg96aUNzh0x88uHxycATrayV9n5x3xx/iiwalHv/V8DtCg6JwiaR7/94vcELi8Xd7/3bG6HPNfnBr/4KkRw/vmR97ZL0fP7On2Q9uHTSp3tO7Tbz+W88+88s/7zz5VsvbdK434Oaqj/daX/6TH01dN3v23PVzG8Zct/LJn4yO39M485fNJnxbjH0BSI/Tu78Sl1R/1oYP1C6bftuO7ol191aBhDrdcPzI1kkvfvuJgdfVmNhmy3VJU1q2GrTsubtLnmgUDAZPANKsVr9XSPl+v9Z1kpo/9WxCjPTbv/+nJ6s+7nI2h0Z8JzR0MnOCz+UzNmibZyc154QGEYuTdDsQMDwTasnpe8H3qkAeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgf6mqeOv/1qt4q2oiYJUF80u79w2qrZk/6kCNiTe/9LNgf4kHjo4dr++fg9HQjCCorKTo/bj6Re1/j/lj0ahOfPznvjcXvxD/6KV/N0WDX+vgBbhpYk077o0ZPOuxZUe/qBP0cPzF8Y3N+MWL1aIQVFZStahRlU5oUvryY/e2D/acfvUXJ+5aMrlOlcD9WwuG/r5s8IK3xjnX+8aet+0okTxFdubhudn5ui86lCGC4LOIkiJ4KqvRZs1Pcn4eFw6r5s+LnutXJXD984MW9ch9N0Bo8ScfrOuW7lSPci8O2t8kReaOEs6ECU5UUlIQyebra0h6OCs4Rm2oP0Z0aW78phseu/QPlS20g2qtQ10apUUebPZA/I+SajYc1+vO3Lf+HsjvvUnyoYBgb3m3FhEwn5TfUEVQBWqzzrPieqblLus1gM39Ppt4net+3zXhsl0xjfadtK9uIqlhgtqVlBQs+b0RBb7r9T99/E/hJ0+sf25y/yqBU8ufdZ/yomXp77Ll27s7LXjw4S1DWlz9/h0Nb/jhFfGHvx/X+9jUMEHDSkr6xuK7/nhHFPjqDw949cXH//DT6XzjpevvWXjlsGNTL/27+njVsruXyXm5DWdrNyxekH68/w9/Ma3bHxIff+hPR+9/+Ozn506HCVRW0tqvoh/ln/DrXk9P3nnwUDWa/mHg8Mmfn7vkH1mJYHAgV0UAXLPx/B8IHeUT+l7Ki6GSNgSbOsIgkSWFVjc39cmKMvqMO2m8JYiyLRTxdP+yCtrKNuJWqdSxe2+zf8zaZlXIIf/d/5vaLs//x/8uz3+H/uVU4Yg/xy/2ThD8L9HrpCePJ9X8R56qNBp8mvLhW3+3oAlmf1otq29c+CjaFzrcUuVx+P4VN4eaIhjbePyGsY3HN6zACR0ydt8HPx1dKeKBmxsenXpn6LLulQ65VRwhPHxeOPBsEqf+80/rp6z40/q8cQXTDqVc9/aDJVm//8+TKZU3tlIjq1PoUj593JJN11VpXM81vlMQRWlS8x+dGha8rnjKb3/c9cZn8377aNfKrzX3t5B1xdou7HrvqgNLnq66eOXg2cOb74zY9t43bklc8DpZ3a7pXr/82INfPVg5Z5/prZof+3Ao1jf7zQe/2n+J0dH/53rXTWWlragdbvg3aDJzTEreF2NS8iKZ3s41YHKldzH9ptffODw4PL//DH3er8IQkeLyO++PbBr65r3BSkIAMNdLrIwArfxy5N64SzFh8vfyQyhUjMxo5CHWU/8m6gu91P7n+M/60uaFP4ILflrlMOSoFYlm+VrIdcul56MgISgXfx8wgzSiXPSP/gXNKkTw4PxwPF301p+/XJreVT+ftYmL3vSY4KVoiZv4epguXzNeKEXJldQRnMou3szQnk/uRyg7LTHVg8R8RNZc8o2vl+nydeGEKzAl59OBEvygYi/ihOMG2V4JJz7GJejb1WO+iqnImsHFeqrIGklENm0uQSWkoFPQFdeL2OyKVy5Rr0FmbCoeXMzCaMWHviY2yP4LmsKY4OdU/eI+cPFSdmeKi/nJv8J76vwv/MrOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADw39SaPfw//5s9XNHax10DiFAaXDsFMRl9mRkbAESDiUjKSfQw6zZ3ikRY1TL9gtCiUdeqmcWZVT1EfK/wYEZ2ZH3iZwKCwsRKsyIVjSqandVrBNg6qTAgxB6tJ5Fh9AhvRKEJm3nyTO2TZy6oPsOoBlUewVTowKjihtH8Mb1lyzBQMEnOlGRHmFThygjEKFZGn0wRdON+VZqT0mQ+MyiP0MoIU5nARTEjV2gJdeFko4SFm4Z/tGng2nqdl5UNO5Y/8Nf3X7us2sgD+cM27LypeMngot0zc+rNadzvyK60Q+9kd8qLHR27fG6TtfnDLj/6RnLf3MLhTXad2z81J3NKn6uO7Eo7vPHaBdkd3sjukFuzy3vNG6+o6+AvunQrzas3sqDozrysYXUcLlza7eQbpYPnZDQqXtp8Uk7Z0box+cM2FPTO3pMX2zc3uW9u8o1LvlN/xrt3LCwaVXNf7lXfnNP49Bd9tjc7q2hFw81LL5+TU3b87PQtI1d/0mdP0aCVW0bVt/+laN7Yk/fVuQHblwzefmbv0hMfPLMuv9fKgcu2DviscOiHO2NbN88NOfHMvDDDriP/ti83JwKmfEbh6NWFQz/ccscLYxdk10ozT0zRjYvvfyGn3ooma4dtKLjlpdsbLywauWZTv7ysO63NH/Zl/i3/8e9LQtDOTd8yqv6Xubu/OzOn25l5W0auLhwY0OEkf+eFvJKI++nhQ6yjl5BlLOYPtPBW/s4LaWIhO8E+HmABL+YPtPBpsvTRTJYHaODN3EXIZwjBYyzlILtZQI6I2LcPcSuvp506DtJKTNmV+1mzJtfouGrgwriBqw51Vu+GFevTV1/zTS17rZqXvrzaoI9SY5ZWm1ucn3P9uhOp6+JzMpcMzt59oEbhuIVvpC8fXF530YpuBTEL0w7kFed/62z5r1vui2+UlZm55MHMJR2GzTx40/Zt165rfOZ0PNk5a2ZlbOrZdmf7vUfzfhZb0K1g+fraPXN/Nrc4/9rc3/4iffmRfuuG7s7efbDuooN1F32addm+c6O+mJ1R0HXZkBWfXr+ucZfF++p/q2hr5tjVvfOL83OO7t7fa825m7fNzti4v1dR973FUb2xO7uw9dakmKXV+j7eO6t7fFrH8emrb5/VYuXej/e3sal62IkiGerIK85PD8Mk1dy7oebej/f32tk+M3PJbez6zo8zDty8pjg/p9mEkGuuSSmclfHeqYGrerbdvnFL+uLTjxxvvybCksKEXkXdVw6bObc4/5Hy/b0Ka+79pGfbA+wGYxzmUb7HWQb4EKs5w3LQQysf51Zu4zCP8hruYhZ7WcCrWM9DfJxbydHEemp4NdN5gAxLOMopZrGbi4xwEGCIXdzOVLbzClJ8jvUcZDq7GafsSvrG5SpvVyDubN0jeVcV5rUMjxxd65j0kr1NP5+Z1TomffW0JquaHS+7cltpbFBDT9aeT2uHunySHDshuXVMusKSOhmrPv7B3r5Lr9xWeqzZqsct2ZN6fE3t1PW1UxvP/OTGSfUbBnOhRqvvD2DbJCRumh3M6gctujdz8box7U7EDVp0dYvSlP5LW8VGDnjy1pI6W0uCEBNrHJzdtk1Ckkbzjl5N3L7qV6/K1KzGhx2PZbQ474aQ9Z9P6dwmITwbi+aNsAHnAn/peOzIrtLk3dfGJT/XdltB8xDR1QUh6kiGxB3B964uPA8TzIwLmp/4MsCLObok7OG0CtNDqIlhi0oOJbdJyNiY13LN7LbxrWPqHhjf7Gir836INhCTjWYU9dlWGneOE9ub2zR7BUA7+8iRIs0gxbwu5FZ28AH2kaObW/ga/wLAAm5lBzGZRxlj4iM1/o0bSFDETz1FGdhDHOJtZJnPGpaxlCv2u2AezQNhhgAgyI94lP53vDQksucwIbYbokCMCZfUMVzSU5HgUdCCVgqqXVfzO+24Z3KnJgF2FKBwcD7V27avvIKyodpFr75sXKRtEdQBfCWcp97MurJ5hC1RvRGVfmzwuZZ3hSEeOo8czYnRbegcCRPBVgnfdytzTVSGbakjwpMoEvrBqJMi9bxZkXXw/4lXExJ7WQk2XkcA8HOKNN9AwIto5BJTJQDm+Tohpci55MdXs7rEP9in7ceG/0Ds0Auc69//z+CV5It9kjcd8XfCa+XrTMbGJCAmA/h/QvqPCqcYkRWhfwSth+Umjq5oiS6kIp1f3Y4EiKa1bE1qwIapdUdFyC4XpHKE9J20vfE9oglAFyzgRGg+Ya0ossn0MxujSCsrS78VzbYL1Kj2xFS0txhwH/1rj2hEYTcGdgeqTrTBxS68qlpgZ4VUE+hQ0R0XMjzC/vLik+c9WbmMFalCVQ4bgRUy8bXDjTqXZYcltVVrhhxcONSElzOfP/JSXkpJhiaqMq7HJB1W97KFTzCP1azlo+zjAT5Cnvv4GDMZ4zfM4fX8ltj1Fq7gl0TLvv/tyxZuGr6icODmN0pHxs0eXTqjV+5VTabc+urIDRkd32m67NZX++8KS0Knj/zb9nk34XCfrEl35OZUW3xF3aJRNUMC0ZFdaSX5GR3fuXZxIJCUHW9UtnmpvI69IuWgWhsa7VkR6CQ5qVsvy5iT0fPNQEDqWy1C8zl0LNCwivrOSG6yvMv694ddzvIlt0+5/rMQZMd30mLrRiouiaIKPsuvSA+RNfpr9TdK26VtvSx9ZoShNTYvZWHRoHPTt4wsKBq0MvNE0agjW1osn9tk+ZLBIR0qc2b2NYuaX5ObU5YWxPHyRmn/yTW+eXJ6YZ8XRia/EEg+RaNWFvTOPvTW1QMmZXxj2TMluRkdZ8UOmBT2bsdTr2Q02vf75GvHd7x5UkajE5TGPu/zL16K7Ztb+LwG/ReX9F/e854/8HY+xP1gkD6aGeJhXshMnmQGY0xjhNh7l/IvOlnEE/yMXproYxZ/p4Nl/IEOFvMkHyDDEb5EK5jL+3mEMV7IHP7B+3mCD7KVZezjUYpcJ5nBlfxJ3+8+fHjgqpp7Pynbm/XVmbKap08uG7Ji59mUa/atr70pK+FsyjVxEZLQbXV9M6LB+4SyvOL8B1s2/31GQde9h0/HS10XnxZwbqsQSEL6ztYPercccyaKHOSz6i1DOsmhLdtbXL6+9vKQgHQgJULzceTswIXVxh6pu2hg9w2b6iwfHKSWZW2fxEUVkIE5Z1//y5QIxUVI8InQbP4aFybrWbbtVFbpou0tekcaemJ176xdszI2Fib0WjMrY+P+pk9lFCTtOVk4Lj8+Zum2QIeqmblkwE3bJxfn5wTDHHBwb9ZHOcd21aq5d0v7r2aczn/kxMSMgl391g3VZ/eC9bV7do9ftL72puzzDBHe3b3j49o9y+suGjnmTIAVF3T2bmrD2M3Zu1d0K6DW/7tlSY3UWnkdzOMwY2RpYj019HOYR3kh3ZzmD/yCLcTeu4n3cJQcr6GGkPtoJs9HeZI7+ShPkqGbZvrJ0kcXIa38ig9wgRR3M0aaJpClkZkMkSR2Xcnf7tC0Q4vaHMm7oqC50pTDO5s3+X15r1PzjjZtll+S2O5EnEPN8ksOpYclobgdETOPksVl7VMLSifv7FWhdYQFosSsPdkVnCGBJCw3dTz2xafVrw3JQaGt7zNOnQcIBJbtV5VltTtx2epAQIqPovkk78i76rO3apTUSfos9trk9FUtE1c1O65JABmYk9B/XnlYcdlVPTsk+IQlrYRIstOlKYdjt19Vti1saMjuPYFkVaFchUqq0SYhqTw1OXZC/Kpmx0M61JzM1COT6rf+tDT2+KpOSlIOl3y4v8OJ7c1jjh5veq40rgI0Uom4rN2JmptKG1Y4oIIhwrt3ZLY7EbcrrU7Zu9W7VaBUzNKDqOeTg5FGWvWx0hfqn02Yes38ja/iKXaRICRkIcd4IXG3VS3v5ylGib23lRZQz35yLOQ472WAuxliFUX9Y6/kl+zhFNO4hVmc5knqmc8h/k4Xq7mRh0nxeu4ldr2H1byUK7YMrmx7/o1/uzwefC6UrfXKBKFAB7k/QiAJlkW21Yq6GTwU8PlTEQC/EhBuDQSkqJpPdPOCWPQTEh+KAhmhO4QVl/ol0QWf7KMhskiTopKnjq3UlO8qX9i12pgoLKFuJZ5XuELLkodDhlcOWmFZIGpFW1KJLo5FWeIK2x3K8n1U6OcZeZ4iiqz2DDn8CSV96UfEWEuFgG8y0fVSri7Vj3+wbHQh6so/REBqeMFWVfYjrZjcf+dqgYNl0kr/KYbDIG7wD/Du/xmh2BTdBad89zJZ2mVOoXtBKfm3DO78M7z1fGFtkx/9s8KVnAvNttErlzaKtYh1kOuLy3tTmqdHj5+GebKubBbOXg0uD58+ff/57O3ZfqOrRQQiCxKX9DLN0h/fXxbS2RvmyY/vL9MsbexqEUHIwsSlvIw4fPo8C2cFdfEOnz7f/8cfApCFicN+tL+2b3rBy8lRmsdFAdM8vpwcbRVrAcgCxaWr/tu44NC3o7PiiLejs4yIB5GFigNqbeBsqMNekodotc1ZNB2lg2ZXx9LoQL9c7dSdg6f3DxPfAFeR8Tnf7JrD/CYL5+2mM8r602gMbG03J/Hobnj+gG13tfNqcDXM41VCfR9tbteuro5G6WBVvHjQMl7Jwmkeov+zEl8KB0/v95Z3Bv3rWTSp7aPryVFtHzW7WnwuTqNxfR9tFGvTeBKfc1dXx9vrzWk8uZr8z8J5jioLp3PykLur7dvR2SQe7ax3jh++Nna3avvoenLUqVtplrabVrfqTZLRPDDM4/7PyihL06zfrXrxOQz68aB/uVmsJ6d8u+lcXv/vl6utpnY7Oh/0r5dok3hcO0TvTPcPnz6N0sGqeNGihE+GTU6FWTTLUQz6Vzubrc1iPTkX6rtq9VhJs+Td6eEwi9ttO03T6rH89mxvnIzaTbN6rLz373CcjDp1Z39x5+jxS44qORXmEOasILNwPkr77aY1jabTeNwre82ukWbJu9PDLJhVTuX95b1B76pXLkWXIMgNelcbxdokHjf2tVf9873VzjgZJafiML+pHsvdql073HrVv9xf3j16+DLM4yXbL8/v3//34O3Z/R/eX62I5wIWRfmu1bvG68Fl3vDXNJr1yqVRMkjOhXEyvBte7C/vJefSOBncjS53VpsCg8F19VDe+FmpHsutrjEPFtEl5AnrXQNkWEXeDS92Vzu4GZ906s44Gd4NL/aX9+JzITkVootXg4teudTqWpVjsdN0WUSXMAsnxw/fPv71sHqspGlyOzqfRdPKsVw9lLt1JwsWyam4vI3qXrVcO1Svxyer4kh2f0flu0W7XD57+piHSLN4s1g/uf8eXXI766235/vjZDCJh/V9hCycj5PB3nKHLAsXaZq0ulZ0yY3TcR6qXS7nIl8NLrNwUTmVrscn/XJlZ7319nx/nAwI42Q4icdvz/ejSxgnw2Ge1A4R2TSeNnYRkGZpu229MztITvmb0Wmn6UaX3DxYjNPh8kDi9mbjenxydvszV1yuk0sfs36x9vPns1Ee5zBO734C+Pr70ZLg+48X70z3zm/+1neV+r528PxpQcyt94vViIg85I9vr4Cryf83wuqxurfYPbn71i+X54GDp/fL1Iee0uvezbefT/PEi7KMV2J2pntHH6+ycBrkGQxutjbr82BxfvMn3xGfizvTvZhIiAhBTuJhmqe7691JPD6/+RXyzB4WL8ry3SYilrV2tUGWnj9/HmdxCOhmdPJQZ6+2a+z832vtajGRLAx5cf0n6JmFiAtItk07TdTa1abcTI6Ho9NxL8nC6Xpdulpbb5bL/WK1wptDsQpFFiMu47WYmApVNovVTMggmwvh/7kpQiQjxMSyhISI+//ASjiyAPHaRRu100QxmZBQEebMZYuFBNfqlkZCRCyLhFi2+AewhCOLEC+WzynlRSybk8iW/9IcoQditdyXvv9QroUsQFzGi6VjvCpg+ef7Q8EKRxYkLusNRdJ+hSmr6ze1fXt59XfKR/Qfrd1G/9//tNGfLv9pLzMz5YLZ4z7rnc5KLjV3zOd9qrOUG/1F38r5o7KSG/llv/KFI7KSG/5V/9LFw7KVW7p06NcDlmQlt7hs8DcDF2UpN+jbQQsqBmYlN+C7wfOq+mcrNzfV9/shc7KSmx30/mHorKzkZiZ6/lgyI0u5Hj8Nm5ZTnJVc0c/Df8/rnq3cbwWFv4z4iaDcjzTp8ROP+IHAXJefecx3tOkQlGvzC0/4hi4tQnNf06fBAU/5iqDcl2xS45BnfEFQ7nO2qXDEcz4jMJdwzAs+YZeYoFzECfkf4eUtT11yltlyg7KXG5y93JDs5YZmL1fSQLlhWcvVMFNnLzcie7lHrJdbXHfa8NwTwnNPCc89Izz3nDVzLwjPvSQ/BwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4F+ry+f833//HAA=',
+  'https://dev.api.nexxtmove.nl/storage/page-thumbnails/kFPrFuRKNZyJVgQD1FdfL.webp?t=1730474823223',
+  'https://static.mylead.nl/page-thumbnails/lB2kfr1-jv0VpfjmY6oTf.webp?t=1742222664200',
+  'https://static.mylead.nl/page-thumbnails/w3IEg2HS8gSb1fqqxnTj4.webp?t=1742470198423',
+  'https://static.mylead.nl/page-thumbnails/eD4KoV70dI77VHwhWo9FS.webp?t=1742469922819',
+  'https://static.mylead.nl/page-thumbnails/3f4JB5dhc3OjHhtnubOXy.webp?t=1742470233230',
+  'https://static.mylead.nl/page-thumbnails/xwlyFmJ0PWrcv9hP8xHXH.webp?t=1742470226270',
+  'https://dev.api.nexxtmove.nl/storage/page-thumbnails/qNX8GKSUD89rGX5IAthu_.webp?t=1729856678611',
+  'https://dev.api.nexxtmove.nl/storage/page-thumbnails/kFPrFuRKNZyJVgQD1FdfL.webp?t=1730474823223',
+  'https://static.mylead.nl/page-thumbnails/2bDS0qAxHBOh_qbow5QJh.webp?t=1742221892778',
+  'https://static.mylead.nl/page-thumbnails/qNX8GKSUD89rGX5IAthu_.webp?t=1742222855027',
+  'https://static.mylead.nl/page-thumbnails/efrajGtw6t5hvAtZ6Dx2X.webp?t=1768989168498',
+  'https://static.mylead.nl/page-thumbnails/mhXvohOUqLhbhwgq42CIj.webp?t=1768989180610',
+  'https://static.mylead.nl/page-thumbnails/kFPrFuRKNZyJVgQD1FdfL.webp?t=1759995237607',
+  'https://static.mylead.nl/page-thumbnails/lB2kfr1-jv0VpfjmY6oTf.webp?t=1747145037061',
+]
+
+export default {
+  title: 'Components/Molecules/Template Card',
+  component: TemplateCard,
+  argTypes: {
+    contentFeatures: {
+      control: 'check',
+      options: ['references', 'valuation', 'reviews', 'packages'],
+    },
+  },
+} satisfies Meta<typeof TemplateCard>
+
+type Story = StoryObj<typeof TemplateCard>
+
+const BASE64_URLS = PREVIEW_URLS.filter((url) => url.startsWith('data:image'))
+
+const randomFrom = (urls: string[]): string =>
+  urls[Math.floor(Math.random() * urls.length)] ?? urls[0]!
+
+const randomPreviewUrl = (): string => randomFrom(PREVIEW_URLS)
+
+/** One overlay block, reused so `SelectableDisabled` shows the absence of exactly what `WithOverlay` reveals. */
+const OVERLAY_SLOT = `
+  <template #overlay>
+    <NexxtButton variant="secondary" rounded class="shadow-sm">Bekijk pagina's</NexxtButton>
+    <NexxtButton variant="primary" rounded class="shadow-sm">Kies template</NexxtButton>
+  </template>
+`
+
+export const Default: Story = {
+  args: {
+    image: randomPreviewUrl(),
+    title: 'Basis template Nexxtmove kopie',
+    subtitle: '3 dagen geleden aangepast',
+    contentFeatures: ['references', 'valuation', 'reviews', 'packages'],
+  },
+  render: (args) => ({
+    components: { TemplateCard },
+    setup() {
+      return { args }
+    },
+    template: '<TemplateCard v-bind="args" />',
+  }),
+}
+
+export const WithoutImage: Story = {
+  args: {
+    title: 'Template zonder afbeelding',
+    subtitle: '5 dagen geleden aangepast',
+    contentFeatures: ['references', 'reviews'],
+  },
+  render: (args) => ({
+    components: { TemplateCard },
+    setup() {
+      return { args }
+    },
+    template: '<TemplateCard v-bind="args" />',
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    image: randomPreviewUrl(),
+    title: 'Template met eigen tooltips',
+    contentFeatures: ['references', 'valuation', 'reviews', 'packages'],
+    messages: {
+      references: 'Custom references tooltip',
+      valuation: 'Custom valuation tooltip',
+    },
+  },
+  render: (args) => ({
+    components: { TemplateCard },
+    setup() {
+      return { args }
+    },
+    template: '<TemplateCard v-bind="args" />',
+  }),
+}
+
+export const Base64Image: Story = {
+  args: {
+    image: randomFrom(BASE64_URLS),
+    title: 'Template met base64 afbeelding',
+    subtitle: '1 dag geleden aangepast',
+    contentFeatures: ['references', 'valuation', 'reviews', 'packages'],
+  },
+  render: (args) => ({
+    components: { TemplateCard },
+    setup() {
+      return { args }
+    },
+    template: '<TemplateCard v-bind="args" />',
+  }),
+}
+
+export const OverflowingText: Story = {
+  args: {
+    image: randomPreviewUrl(),
+    title:
+      'Een hele erg lange template titel die zeker niet op één regel past en dus afgekapt moet worden met een ellipsis',
+    subtitle:
+      'Een net zo lange ondertitel die eveneens veel te lang is om volledig weer te geven binnen de kaart',
+    contentFeatures: ['references', 'valuation', 'reviews', 'packages'],
+  },
+  render: (args) => ({
+    components: { TemplateCard },
+    setup() {
+      return { args }
+    },
+    template: '<TemplateCard v-bind="args" />',
+  }),
+}
+
+export const Selectable: Story = {
+  args: {
+    image: randomPreviewUrl(),
+    title: 'Kies dit template',
+    subtitle: 'Klikbaar met muis en toetsenbord',
+    contentFeatures: ['references', 'valuation'],
+    selectable: true,
+  },
+  render: (args) => ({
+    components: { TemplateCard },
+    setup() {
+      return { args }
+    },
+    template: '<TemplateCard v-bind="args" />',
+  }),
+}
+
+export const Selected: Story = {
+  args: {
+    image: randomPreviewUrl(),
+    title: 'Gekozen template',
+    subtitle: 'Blauwe rand op de kaart en een badge rechtsboven',
+    contentFeatures: ['references', 'valuation', 'reviews'],
+    selectable: true,
+    selected: true,
+    checkmark: true,
+  },
+  render: (args) => ({
+    components: { TemplateCard },
+    setup() {
+      return { args }
+    },
+    template: '<TemplateCard v-bind="args" />',
+  }),
+}
+
+/**
+ * Same overlay slot as `WithOverlay`, but a disabled selectable card does not render it at all: an
+ * invisible layer would still hold a tabbable button. Put a preview button in `#actions` instead --
+ * that corner stays interactive and undimmed.
+ */
+export const SelectableDisabled: Story = {
+  args: {
+    image: randomPreviewUrl(),
+    title: 'Niet beschikbaar',
+    subtitle: 'Geen overlay en geen select; gebruik #actions voor een previewknop',
+    contentFeatures: ['packages'],
+    selectable: true,
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { TemplateCard, NexxtButton },
+    setup() {
+      return { args }
+    },
+    template: `<TemplateCard v-bind="args">${OVERLAY_SLOT}</TemplateCard>`,
+  }),
+}
+
+export const WithOverlay: Story = {
+  args: {
+    image: randomPreviewUrl(),
+    title: 'Template met overlay',
+    subtitle: 'Hover of tab om de knoppen te tonen',
+    contentFeatures: ['references', 'reviews'],
+    selectable: true,
+  },
+  render: (args) => ({
+    components: { TemplateCard, NexxtButton },
+    setup() {
+      return { args }
+    },
+    template: `<TemplateCard v-bind="args">${OVERLAY_SLOT}</TemplateCard>`,
+  }),
+}
+
+/** The blue border sits on the root and the badge above the overlay, so a chosen card stays recognisable once the overlay covers it. */
+export const SelectedWithOverlay: Story = {
+  args: {
+    image: randomPreviewUrl(),
+    title: 'Gekozen template met overlay',
+    subtitle: 'Rand en badge blijven zichtbaar onder de overlay',
+    contentFeatures: ['references', 'reviews'],
+    selectable: true,
+    selected: true,
+    checkmark: true,
+  },
+  render: (args) => ({
+    components: { TemplateCard, NexxtButton },
+    setup() {
+      return { args }
+    },
+    template: `<TemplateCard v-bind="args">${OVERLAY_SLOT}</TemplateCard>`,
+  }),
+}
+
+/**
+ * Without `selectable` there is no select button and no tabstop, but the overlay and the actions
+ * corner still work: a grid that only previews templates gets the same affordances.
+ */
+export const ReadOnlyWithOverlay: Story = {
+  args: {
+    image: randomPreviewUrl(),
+    title: 'Alleen bekijken',
+    subtitle: 'Niet selecteerbaar, wel een overlay en een actieknop',
+    contentFeatures: ['references', 'packages'],
+  },
+  render: (args) => ({
+    components: { TemplateCard, NexxtButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <TemplateCard v-bind="args">
+        ${OVERLAY_SLOT}
+        <template #actions>
+          <NexxtButton
+            variant="secondary"
+            rounded
+            icon="eye"
+            aria-label="Bekijk de pagina's van dit template"
+            class="shadow-sm"
+          />
+        </template>
+      </TemplateCard>
+    `,
+  }),
+}
+
+export const WithActions: Story = {
+  args: {
+    image: randomPreviewUrl(),
+    title: 'Template met actieknop',
+    subtitle: 'Rond oogje rechtsboven',
+    contentFeatures: ['valuation'],
+    selectable: true,
+  },
+  render: (args) => ({
+    components: { TemplateCard, NexxtButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <TemplateCard v-bind="args">
+        <template #actions>
+          <NexxtButton
+            variant="secondary"
+            rounded
+            icon="eye"
+            aria-label="Bekijk de pagina's van dit template"
+            class="shadow-sm"
+          />
+        </template>
+      </TemplateCard>
+    `,
+  }),
+}
+
+export const Grid: Story = {
+  render: () => ({
+    components: { TemplateCard },
+    setup() {
+      const cards = [
+        {
+          image: randomPreviewUrl(),
+          title: 'Kort',
+          contentFeatures: ['references'],
+        },
+        {
+          title: 'Zonder afbeelding maar met een flink langere titel',
+          subtitle: 'Een ondertitel die ook nog eens een stuk langer is dan die van de buren',
+          contentFeatures: ['references', 'valuation', 'reviews', 'packages'],
+        },
+        {
+          image: randomPreviewUrl(),
+          title: 'Gekozen',
+          subtitle: '3 dagen geleden aangepast',
+          contentFeatures: ['reviews', 'packages'],
+          selected: true,
+        },
+      ]
+
+      return { cards }
+    },
+    template: `
+      <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+        <TemplateCard v-for="card in cards" :key="card.title" v-bind="card" selectable checkmark />
+      </div>
+    `,
+  }),
+}