{"_id":"@cagov/ds-link-grid","_rev":"11-41df5625af43bb95f08affec18d2bedd","name":"@cagov/ds-link-grid","dist-tags":{"beta":"2.1.0-beta","latest":"3.0.1"},"versions":{"2.1.0-beta":{"name":"@cagov/ds-link-grid","version":"2.1.0-beta","keywords":[],"author":"","license":"ISC","_id":"@cagov/ds-link-grid@2.1.0-beta","maintainers":[{"name":"zakiyak","email":"zakiya.khabir@digital.ca.gov"},{"name":"timothyshambra","email":"timothy.shambra@gmail.com"},{"name":"xjensen","email":"github@id.xjensen.com"},{"name":"carter.medlin","email":"carter.medlin@gmail.com"},{"name":"aaronhans","email":"aaronhans@gmail.com"},{"name":"chacha-california","email":"chach.sikes@digital.ca.gov"},{"name":"kkoryaka","email":"konstantin.koryaka@state.ca.gov"}],"homepage":"https://github.com/cagov/design-system/tree/main#readme","bugs":{"url":"https://github.com/cagov/design-system/issues"},"dist":{"shasum":"561735a3eec448afe19e166c59136f592e79b4d1","tarball":"https://registry.npmjs.org/@cagov/ds-link-grid/-/ds-link-grid-2.1.0-beta.tgz","fileCount":10,"integrity":"sha512-zXLBwqR7JFJwuYCLx/YpFIsdWffcH12OTf7ldiSSmjLhTl1GCMVowpGsn8vgEhGfkkjBgcJsr7qW8psGjL5SHQ==","signatures":[{"sig":"MEYCIQDog8tqOXCiZ5K3G2x5RWncEwOCsEBNMBdDLhsG/4idLgIhAPahmfUUylobw8WGkGi9aKTvSI/nRM5eBWjBRyQQF86/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+wmUCRA9TVsSAnZWagAAtOAQAKOewQ8XJ8g9vvZfn2/l\nzPaCJdrmHOLsfrjf/o55N3ti0f/JZP8I1pZxMub/zRVSSzE8xJV/wCVZAWwZ\nuSLMAiIM41mrQmCKSF5349fFp7HQoy0s9I3c0+CZspgU2zop9+Ymp4lAzYjc\np+K05lSzRVgOwJ23b89v2OWLWrt/elYUoOxCG4LxisDjwcTUOQBBwUm2N0Tu\nb370L64eXSav6K8bdj0eh1s1Cs2UmDtRTJB4GmObPbGiEBk/10kzskmLjL+q\naDyaWq+DEt6LjkA2J3WacJPLmKq+NzwDLOwWBZFNHgmON5q2ZA6ddlQelzq6\nh01R2DNRtKGUEZcnC7V9bK5ubvkfmQGSzBFLa6gQnxxywJ86hEAXtpoDxJ1r\nszWk3UwA4nkYfBUdbRc5d7AhBdymd/DZZH1nuwbi07FJRh2TWR1lj8I813Re\nDnz+7LzGg3vQilBj06UhSuPwS71tZs2cMy1dygw2Q4tLsoednWuhv46Zm/7A\nBamRJ1K/gY/oGP/17HkxKKUDBASlJuf6gDn/odSg41Wu5hxYARRr+SeGftBG\nXmdVpGTNafmHSRTBGg/INgDmxFn506GgQZrmmwev2FAH3TMr58MfK4qf7otc\nehaNL/PxEYQ5VVBZF94x2lZxlXx8IaNBy6Au3W5/28pbYe0L9macPRDu2hIj\nwBLr\r\n=SB67\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.css","type":"module","gitHead":"5e6356f06ab923f129a5b650d5d19a8594954069","scripts":{"test":"web-test-runner \"test/**/*.js\" --node-resolve","build":"sass src/index.scss index.css","cdn:publish":"node ../../docs/src/publish/cdn-deploy.js","test:visual":"web-test-runner \"test/**/*.js\" --node-resolve --config test-config.js","html:preview":"node ../../docs/src/publish/dynamic-html.js","prepublishOnly":"npm run html:preview && npm run build && npm test && npm run cdn:publish"},"_npmUser":{"name":"xjensen","email":"github@id.xjensen.com"},"repository":{"url":"git+https://github.com/cagov/design-system.git#main","type":"git"},"_npmVersion":"7.22.0","description":"The card grid depends on individual cards and lays them out in a grid","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.38.0","@open-wc/testing":"^3.0.1","@web/test-runner-puppeteer":"^0.10.2"},"_npmOperationalInternal":{"tmp":"tmp/ds-link-grid_2.1.0-beta_1643841940666_0.18605623527850468","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@cagov/ds-link-grid","version":"2.1.0","keywords":[],"author":"","license":"ISC","_id":"@cagov/ds-link-grid@2.1.0","maintainers":[{"name":"zakiyak","email":"zakiya.khabir@digital.ca.gov"},{"name":"timothyshambra","email":"timothy.shambra@gmail.com"},{"name":"xjensen","email":"github@id.xjensen.com"},{"name":"carter.medlin","email":"carter.medlin@gmail.com"},{"name":"aaronhans","email":"aaronhans@gmail.com"},{"name":"chacha-california","email":"chach.sikes@digital.ca.gov"},{"name":"kkoryaka","email":"konstantin.koryaka@state.ca.gov"}],"homepage":"https://github.com/cagov/design-system/tree/main#readme","bugs":{"url":"https://github.com/cagov/design-system/issues"},"dist":{"shasum":"1a4f05c2bb360c0593bdc594969ef33504fabafa","tarball":"https://registry.npmjs.org/@cagov/ds-link-grid/-/ds-link-grid-2.1.0.tgz","fileCount":10,"integrity":"sha512-+8Lk9LovVxAW5GjHjkZvcO9pbscEWLmIuj2qozbVfriNRQiJbOQfr20YBYWaTsjEBPOXEr8WrTUtixdmM+f1kQ==","signatures":[{"sig":"MEUCIQDPsKS4puYj7iG1A/iICoZBSTug3f6qWvFLEjMWi4/EbwIgCS4Txsc/JjYmGY95kXt3T+IgjYAAp7a+FYBlhjaWMo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/EEICRA9TVsSAnZWagAAMIMP/RzwVctTOJdoAMQMWqly\nxxvLOz6c03xUcK6CPhit+K7chfHRmdSz0CP5XFL2Zm1/dF4GtaYPntOHsYFW\n/jfQ44F3PZkuSgrEffOH2Zeo/8/diDgaA0ntK4ZZbIc6oHp4BS18b7/DHo/l\nBWxM+x5xcjhTwh/CUBnucQplKaG4xyqHrjArNRAqYKpooR1swVFXloTbMM9S\naBKegyVHSo2j8slgkMovZQb4nq3vC+GIugK95K4zqIoby10TO22PcGWxPLUU\n/GUS6dmXVTirjQmQN6mqZ2aCjE/zAgdtNNlKKpLhKeKczXbcACcIHJ/eafwA\n89Ke6GKsLZubKD7sIa1cDSfGUPvDF8/dEh5T4+IoFUnsps6y9ezH0gzjDdSZ\nMhKtCB2UuzE55slPvftZUBIhisuNaeck9A47LuODqq4mZ6hSLT8UmaCmMIYs\nBBT8sHhXJ0rs5zt9BtdYHoDHkgf06C/ajCDWz/b4YVW6xN/vrQTlarrCjQq9\npqP/yVHeaXYJNzPm1AK8CEiKn0zrHk97YCiWOt/RHr8LXhDn4ElNU1TiaRNE\nSPvv+B4BWw1gYARGVIwL95hp4OJiUtL3tlMS/ysqwVJcr2tL8f0PBtsziyn+\n9xEQ2T3LjaDeDk1+C8UUZiiTiyubIqvMDdHVNb7IqPgHwcq4j9I1jSXfgGjI\nrW93\r\n=LqEc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.css","type":"module","gitHead":"443bbddb455d0cb362a140369ef463b7cd753725","scripts":{"test":"web-test-runner \"test/**/*.js\" --node-resolve","build":"sass src/index.scss index.css","cdn:publish":"node ../../docs/src/publish/cdn-deploy.js","test:visual":"web-test-runner \"test/**/*.js\" --node-resolve --config test-config.js","html:preview":"node ../../docs/src/publish/dynamic-html.js","prepublishOnly":"npm run html:preview && npm run build && npm test && npm run cdn:publish"},"_npmUser":{"name":"xjensen","email":"github@id.xjensen.com"},"repository":{"url":"git+https://github.com/cagov/design-system.git#main","type":"git"},"_npmVersion":"7.22.0","description":"The card grid depends on individual cards and lays them out in a grid","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.38.0","@open-wc/testing":"^3.0.1","@web/test-runner-puppeteer":"^0.10.2"},"_npmOperationalInternal":{"tmp":"tmp/ds-link-grid_2.1.0_1643921672608_0.452810646603254","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@cagov/ds-link-grid","version":"2.1.1","keywords":[],"author":"","license":"ISC","_id":"@cagov/ds-link-grid@2.1.1","maintainers":[{"name":"zakiyak","email":"zakiya.khabir@digital.ca.gov"},{"name":"timothyshambra","email":"timothy.shambra@gmail.com"},{"name":"xjensen","email":"github@id.xjensen.com"},{"name":"carter.medlin","email":"carter.medlin@gmail.com"},{"name":"aaronhans","email":"aaronhans@gmail.com"},{"name":"chacha-california","email":"chach.sikes@digital.ca.gov"},{"name":"kkoryaka","email":"konstantin.koryaka@state.ca.gov"}],"homepage":"https://github.com/cagov/design-system/tree/main#readme","bugs":{"url":"https://github.com/cagov/design-system/issues"},"dist":{"shasum":"e723c921ae737241512acf8abbaf8d6e6fd00eeb","tarball":"https://registry.npmjs.org/@cagov/ds-link-grid/-/ds-link-grid-2.1.1.tgz","fileCount":9,"integrity":"sha512-4jl/NvktbEdqGfEoUCrwLv406O3XKNvmUUbIKCj+Br0eSW00TkNF3mgSWN6Tto0O8Hzo0MQiHT3LzNT4SlGhAw==","signatures":[{"sig":"MEUCIQC7BtsMbyAnJBmk5blPaHkgywb3piFo7BIWyQI248KSiwIgbX6n4cIIKiCdWZE23MikncBoipeeEbSnkVVEiNWfKoA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidY8BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZRxAAk3AdNxHQ+TVu7jkjr7LygaJ+m6H1cfR3kUduC1CzxyeddwQG\r\nlARkvl3BWrXGmsXbpWRhp9i73Qd5T2PQm0c57t5XmLZy1g1e2TA7BFXnALtR\r\nF8zEe0+Zw0s+yLxsjDtC7wVcR1phrxciSraQYQyVeimCLfEfiB3KewdyrFJ+\r\nIcO7R6QbzMptyP0btTkVe36e5t+9tS2XG9fOjsyTSJuREUSUNv8HvEOdnjFS\r\nUfn15DedT4MxFZlDDukvYCQBDPUQhiiUmGsnOV88muVzaf+OPAtYC4X/OHD0\r\nJaCJmeRaU6qt+kUVmCzHIoeUJ3pDOuVqW2otfHSI0M6yz8ZZ0j6qye0rJehW\r\n0wyhR132HHn0qjmj9Q4kve6VTTu4fZBlYFOjggy5AM9eMSwTUBMR7pePxJ9k\r\nMjLDiQOMAd2BiIkExj533Y0+qIr5utPsf6UDDCsP+Rd3tCuU/mR2KoY6OgOs\r\n3NZh9xLvbvGhBD9nfw4Z4UQLrqrpRRpGAcn6Bz2spiLzBOFK8m8fjlgTXuFQ\r\n7vuRvFzMN57mEKxkvmItnSjxcrpDTDiQ2vvKkdvIBQKiir7xH1h9M5kFV8RK\r\nXTop6qVAMbhCa8SMCRCSncm72cj5D/1GrOveDHcDIEGYVTKfLV7PcCUtLRQ6\r\nim4HaP/+HfhOhp0fZQctmvoGpEDZohcykvk=\r\n=w8Ue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.css","type":"module","gitHead":"752dd8ff70eafb2f15ff41d565859d5e1969ca6e","scripts":{"test":"web-test-runner \"test/**/*.js\" --node-resolve","build":"sass src/index.scss index.css","cdn:publish":"node ../../docs/src/publish/cdn-deploy.js","html:preview":"node ../../docs/src/publish/dynamic-html.js","prepublishOnly":"npm run html:preview && npm run build && npm test && npm run cdn:publish"},"_npmUser":{"name":"xjensen","email":"github@id.xjensen.com"},"repository":{"url":"git+https://github.com/cagov/design-system.git#main","type":"git"},"_npmVersion":"7.22.0","description":"The card grid depends on individual cards and lays them out in a grid","directories":{},"_nodeVersion":"14.17.6","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.38.0","@open-wc/testing":"^3.0.1","@web/test-runner-puppeteer":"^0.10.2"},"_npmOperationalInternal":{"tmp":"tmp/ds-link-grid_2.1.1_1651871489287_0.6855705712034028","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@cagov/ds-link-grid","version":"3.0.0","keywords":[],"author":"","license":"ISC","_id":"@cagov/ds-link-grid@3.0.0","maintainers":[{"name":"zakiyak","email":"zakiya.khabir@digital.ca.gov"},{"name":"timothyshambra","email":"timothy.shambra@gmail.com"},{"name":"xjensen","email":"github@id.xjensen.com"},{"name":"carter.medlin","email":"carter.medlin@gmail.com"},{"name":"aaronhans","email":"aaronhans@gmail.com"},{"name":"chacha-california","email":"chach.sikes@digital.ca.gov"},{"name":"kkoryaka","email":"konstantin.koryaka@state.ca.gov"}],"homepage":"https://github.com/cagov/design-system/tree/main#readme","bugs":{"url":"https://github.com/cagov/design-system/issues"},"dist":{"shasum":"7f3fd158380c874c393a967ca2f52e405e4a5e4f","tarball":"https://registry.npmjs.org/@cagov/ds-link-grid/-/ds-link-grid-3.0.0.tgz","fileCount":9,"integrity":"sha512-dTuyS/V+AGtopRccLMcal7mnQJzrnlYSxPGnoBDJ0GojMsbui9oNnM7u0ecAya5bt6kiaY77yBtmdPt8QOsRPg==","signatures":[{"sig":"MEYCIQC4+6FY3V2vH+66bfk4K+XmeBE0JyZzUqs5hscFcTE0uQIhAPr8FbrG8F6ZyJ01KAQIJjRQlF8uw5NB0VeMm5abUdo5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8VsAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPlA//W5gXvWWxJtIxhs3kdEgghCHsMDlZqMxJq+tasSKTfpedpGTm\r\noGnZnnff5QDWIG/QGL0OImdqlgAa+1HPhuvWiQpBruzd/9+DkkPvGE9md7Cw\r\nL1VAhpERBSbxOykn8X7ulxtzOnUG1B2qVjE7Sb0iz1dh4WuP8YzRhe4mG/oE\r\nNfRhPpVmUBZ0U4W4TYektqNONe88n2yOPk/sHVuOLb0y7LzzQyVXCe3ZDWYS\r\nwxVB4KtrJ7UKcdYRU/M8IaXBljy2YzzszcaXpKFZ21Dsw559eIPx9asTUXN9\r\nor+t+3ifFsPQq1ECigLTEM7cf+HqgClAcC7zb8XqepESZ8Q2Xy2EGSKHH3jW\r\nJLsDQj/Hw9Q8XA0sdfQXXFjV9zm8oEO4U/AqsuNRFe7N8TKTH2FBRHT6DtoQ\r\nTCyW7KzUxtm9ak1ayY1yaFe0uZWdYQ8Cav9wUcB1q+YREQLRrWtzU5sEV3Yk\r\nZ/mIgCq9TTpmu2HCQX0MjwMs7SMZ/4s9J9uo/mYrZclM33JeBCui9uFaGCGJ\r\nEWWum+XXbpCwT8KNP577FTsw1rXZ/evdCd+ERuZ/ARm91baPewONPsc6QMrM\r\nzueO1fwteGORuLe2ZE2RA4P3EUSTHWRCp5m5H65tMq4lxD1S/kWITjYhZAQJ\r\njeRwuy8DnJ7DCGahRGQirmaIsWVrnIDqMes=\r\n=QRTt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.css","type":"module","gitHead":"b320f54017ebc331c69128312c6c8cb3a4ad7a51","scripts":{"test":"web-test-runner \"test/**/*.js\" --node-resolve","build":"sass src/index.scss dist/index.css","cdn:publish":"node ../../docs/src/publish/cdn-deploy.js","html:preview":"node ../../docs/src/publish/dynamic-html.js","prepublishOnly":"npm run html:preview && npm run build && npm test && npm run cdn:publish"},"_npmUser":{"name":"xjensen","email":"github@id.xjensen.com"},"repository":{"url":"git+https://github.com/cagov/design-system.git#main","type":"git"},"_npmVersion":"8.11.0","description":"The card grid depends on individual cards and lays them out in a grid","directories":{},"_nodeVersion":"16.16.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.38.0","@open-wc/testing":"^3.0.1","@web/test-runner-puppeteer":"^0.10.2"},"_npmOperationalInternal":{"tmp":"tmp/ds-link-grid_3.0.0_1659984640668_0.12008316237215011","host":"s3://npm-registry-packages"}},"3.0.1":{"name":"@cagov/ds-link-grid","version":"3.0.1","keywords":[],"author":"","license":"ISC","_id":"@cagov/ds-link-grid@3.0.1","maintainers":[{"name":"jbum","email":"jbum@jbum.com"},{"name":"zakiyak","email":"zakiya@innovation.ca.gov"},{"name":"timothyshambra","email":"timothy.shambra@gmail.com"},{"name":"xjensen","email":"github@id.xjensen.com"},{"name":"aaronhans","email":"aaronhans@gmail.com"},{"name":"chacha-california","email":"chach.sikes@innovation.ca.gov"},{"name":"kkoryaka","email":"konstantin.koryaka@state.ca.gov"}],"homepage":"https://github.com/cagov/design-system/tree/main#readme","bugs":{"url":"https://github.com/cagov/design-system/issues"},"dist":{"shasum":"edf4b2faefa215faa77e39594fcefa9ed6671b4c","tarball":"https://registry.npmjs.org/@cagov/ds-link-grid/-/ds-link-grid-3.0.1.tgz","fileCount":9,"integrity":"sha512-IxSZ3V4myJtF6Df8vRY24RC7Ru8+9xkpmK7OfWkeAGRnbpz7fmJ51d4Ex09LAQ2EIJLslNZal2NxbtBgXmdv9Q==","signatures":[{"sig":"MEQCIB4a3VGr8+aRZ6/59askj6zGifDNEd84VKyCdR5HHdlOAiAnL63fXamo7LJt7OlU206VH7zSkjCFOGj015iXJUcp8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13279},"main":"dist/index.css","type":"module","gitHead":"479f1353fed9d262e3d33cd8fbaad72a8c7f3da3","scripts":{"test":"web-test-runner \"test/**/*.js\" --node-resolve","build":"sass src/index.scss dist/index.css","cdn:publish":"node ../../docs/src/publish/cdn-deploy.js","html:preview":"node ../../docs/src/publish/dynamic-html.js","prepublishOnly":"npm run html:preview && npm run build && npm test && npm run cdn:publish"},"_npmUser":{"name":"xjensen","email":"github@id.xjensen.com"},"repository":{"url":"git+https://github.com/cagov/design-system.git#main","type":"git"},"_npmVersion":"10.2.4","description":"The card grid depends on individual cards and lays them out in a grid","directories":{},"_nodeVersion":"21.6.2","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.38.0","@open-wc/testing":"^3.0.1","@web/test-runner-puppeteer":"^0.10.2"},"_npmOperationalInternal":{"tmp":"tmp/ds-link-grid_3.0.1_1709242322510_0.7348789893690635","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-02-02T22:45:40.619Z","modified":"2026-04-01T19:54:40.312Z","2.1.0-beta":"2022-02-02T22:45:40.811Z","2.1.0":"2022-02-03T20:54:32.732Z","2.1.1":"2022-05-06T21:11:29.442Z","3.0.0":"2022-08-08T18:50:40.811Z","3.0.1":"2024-02-29T21:32:02.657Z"},"bugs":{"url":"https://github.com/cagov/design-system/issues"},"license":"ISC","homepage":"https://github.com/cagov/design-system/tree/main#readme","keywords":[],"repository":{"url":"git+https://github.com/cagov/design-system.git#main","type":"git"},"description":"The card grid depends on individual cards and lays them out in a grid","maintainers":[{"email":"github@id.xjensen.com","name":"xjensen"},{"email":"jbum@jbum.com","name":"jbum"},{"email":"chach.sikes@innovation.ca.gov","name":"chacha-california"},{"email":"zakiya@innovation.ca.gov","name":"zakiyak"}],"readme":"# Link grid\n\nThe link grid organizes links that function as calls to action (CTAs) or highlight topics. It guides people to important services and topics. The grid can also be used by content creators to lead users to specific content.\n\nWhen viewed on a computer, the grid is a maximum of 3 links wide. On mobile devices, this grid collapses into a single column.\n\n## When and how to use it\n\nUse the link grid to highlight the top things people need. Organize the links in a way that makes sense for people’s primary needs.\n\nThe link grid is typically used on the homepage of a site so visitors can find and get to useful content quickly.\n\nOnly use the link grid if you have two or more links to add to it.\n\n### How not to use it\n\nAvoid using more than 9 links. The link grid is intended to highlight the most important content. The recommended maximum grid size is 3 rows by 3 columns.\n\nBecause the grid collapses into one column on mobile, large grids may occupy several screens. This can hide lower links.\n\n## Demo and sample markup\n\n\n\n```html preview\n
\n```\n\n\n\n## Specs\n\n| Property | Value |\n| ------------ | ---------------- |\n| Machine name | ds-link-grid |\n| JavaScript | no |\n| SCSS | ./src/index.scss |\n\n## Project installation\n\nThe instructions assume familiarity with [npm](https://npmjs.com) package management tool and [Sass](https://sass-lang.com/).\n\n1. Include **SCSS** in your compiler.\n2. Add the **sample markup** from the component to your HTML.\n3. Modify the **sample markup** with your URLs and card text as needed. Refer to the [Content model section](#content-model) for notes on mapping your data to the **sample markup**.\n\n### CDN installation\n\nWe recommend using a build system and bundling your CSS for faster performance. If you do not use a build system, you can include the code from our CDN with a link tag.\n\n```html\n\n```\n\n## CSS variables\n\nThe following [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are used in this component:\n\n- `--primary-700`\n- `--accent2-500`\n- `--gray-100`\n- `--gray-300`\n- `--border-1`\n- `--border-5`\n- `--radius-2`\n- `--s-1`\n- `--s-2`\n- `--s-3`\n- `--font-size-5`\n- `--font-lineheight-3`\n\n\n\nAll CSS variables define their own fallback value so you do not have to use additional CSS unless you want to change them. You may define your own value for the variable by adding your own style rules. Here is an example defining the global hex value for a CSS variable named “--primary-700”:\n\n```css\n:root {\n --primary-700: #165ac2;\n}\n```\n\n## Accessibility\n\n### Component-specific accessibility review\n\n- Make sure that the button has solid, 2px outline that uses `--accent2-500` variable on focused state.\n- Make sure that the svg arrow inside of each link has `aria-hidden=”true”` attribute.\n\n### Standard accessibility review\n\nAs a component in Alpha status, this component must pass the following accessibility reviews every time a new version is published:\n\n- Tested with the [axe](https://www.deque.com/axe/) accessibility tool and passes all automated [WCAG](https://www.w3.org/TR/WCAG21/) Level AA checks\n- Reviewed with the [VoiceOver](https://www.apple.com/voiceover/info/guide/_1121.html) screen reader on desktop\n- Verified keyboard navigation and that all actionable elements of the component are reachable via keyboard commands only\n- Reviewed component layout on a variety of screen sizes\n\n## Progressive enhancement\n\nThis is an HTML- and CSS-only component. JavaScript is not required. It uses [CSS variables]() to inherit design token values. Token definitions are not required because these style rules provide fallback values.\n\n\n\n## Content model\n\nThis component uses the following data attributes. We provide this information to help with integrating the component into backend publishing systems or identifying content that may require translation.\n\n| Name | Attribute name | Data type | Field type | Selector |\n| ----- | -------------- | --------- | ---------- | ------------------ |\n| Title | title | string | Plain text | .card-text |\n| Url | url | string | URL | a.cagov-card[href] |\n\n## Contributor/developer documentation\n\n- [Component information](https://github.com/cagov/design-system/blob/main/components/README.md)\n\n- [Unit tests](https://github.com/cagov/design-system/blob/main/components/UNIT-TESTS.md)\n","readmeFilename":"README.md"}