{"_id":"@cagov/ds-highlight-section","_rev":"11-057d99ded9abc0197290830348f55af5","name":"@cagov/ds-highlight-section","dist-tags":{"latest":"2.0.1"},"versions":{"1.0.1":{"name":"@cagov/ds-highlight-section","version":"1.0.1","keywords":[],"author":"","license":"ISC","_id":"@cagov/ds-highlight-section@1.0.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":"b5b02f681f20752e380c6ab47f63a3665dde11ea","tarball":"https://registry.npmjs.org/@cagov/ds-highlight-section/-/ds-highlight-section-1.0.1.tgz","fileCount":12,"integrity":"sha512-LnFe5w6/Y9CtFD2mo5BHEbtnenq6BnP7MKBh3ykRhNtGayPvhgH2vdZ/t/YVO7kUXdpJ90esTV6/OAVVT/6LTA==","signatures":[{"sig":"MEQCIGEit+lNuVfbTvMqrtTipNmz+O7kx+z8rNBQr2Y+Fwo4AiAwToMuMBzTkZ/na1P7OYLxtfeL/Kv3JMFg201LG0+VIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KLBCRA9TVsSAnZWagAAfv4QAJCPNt4KWFJhQMysNMnd\n4RPetINRgZXWL0Z0imsQZqaVJok7zAT7++v4Tci8MwprTxHfmEJEEn9mdu8k\nmZoUY8sqC9oTUkrntJCG5vbqBPyndFXO9Spo+CKOj+EuURlHTTJGjoc/0BkF\nqLUhobvcHU7BXVRfTjn0xuTPwXjvvobfMMcxkJs9blgtlrZcu8Q6S75n0fm5\nLdpIUr4dtI81LJsIn4rHnswRp9EFsaMBAOZ5ydPpGjgFMzYmHDrqioEJ+GIf\nTF1Zfr4FQ64BHrO8dsw4S80CdywZYfyNLSLpi5/v5pMXOAZbHopU9zzHwakN\nqR1IWwWsCVRYkpPxM6nprArzZo1pQWRrdWVseFFyGHtSFxigeFwnk8Uwpmom\n/toxWwxMZ2yvV9xTofkljzpPB+xL9rhMXG1BXXib4V7GeE5/jMQR880VN25g\n52yEYsRvd950OXe0SgIXYX7/UhxHSAcFTS3aRaa3WveWru2gFcicu5+LihTk\nGJDJr7wH6eUnkFaZeOANgbG0+K/14tauMyq5JbLtW8jgHBjb0sVhI1l89hAk\nggvS2AIq+Vhm9ALs3r+RErAtsSd8o1qmEEGSLmxjNHYbwRi/pwzncN7bUNMw\nKPTydzZfQXoBgt2gH8i43SwccBzwSdogqXWsE1fhh3mpl+gSHtAZ7pjgY6V7\n6Nex\r\n=2YvV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.css","type":"module","scripts":{"test":"web-test-runner \"test/**/*.js\" --node-resolve","build":"sass src/index.scss index.css","test:visual":"web-test-runner \"test/**/*.js\" --node-resolve --config test-config.js","prepublishOnly":"npm run build && npm test"},"_npmUser":{"name":"kkoryaka","email":"konstantin.koryaka@state.ca.gov"},"repository":{"url":"git+https://github.com/cagov/design-system.git#main","type":"git"},"_npmVersion":"7.12.0","description":"THe Highlight Section is a great way to showcase small bits of important information, and can be used to display services or features. ","directories":{},"_nodeVersion":"14.16.1","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.38.0","@open-wc/testing":"^3.0.1","@web/test-runner-puppeteer":"^0.10.2"},"_npmOperationalInternal":{"tmp":"tmp/ds-highlight-section_1.0.1_1642635969664_0.22303648170479806","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@cagov/ds-highlight-section","version":"1.0.2","keywords":[],"author":"","license":"ISC","_id":"@cagov/ds-highlight-section@1.0.2","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":"2041693a5665ed37ed50689d19c18fc609074a23","tarball":"https://registry.npmjs.org/@cagov/ds-highlight-section/-/ds-highlight-section-1.0.2.tgz","fileCount":11,"integrity":"sha512-0lZC04OP402H44KUppqGpet8ztr2dCIGlyWLqhL1sp5mWySVaDqoKq5dUH0IHkHDA16NCZJkF8bRWanPNSQ3KQ==","signatures":[{"sig":"MEUCIQD7JyQMw145wVW7lLztUzED/pOSkueG7X9h8ecpX4zolQIgWP1KZxcFwnphPU1i27YcA6n+2ZVYcZdbTmBbfOS98SY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaHh0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpcxAApSyggNqCDGlo/mPJqorz/A2ZpfY8E/T0wTg5n8toWb64rAeB\r\nb3IcLMTvUS+NtFLAxVxvvAx0N8IzKThx7iB0b0yaAHbl9TH54rDlbXL9yfCz\r\n7dwHULD5m/rUHZJnGlUEAv38HmedBF5rt1ggSbAaH4PNPlV7wUf1lTJwio7O\r\nRQM2PrtynO1tK/fm9f96eT52FwWiBrkHVzdfMGCwBcj0SFyWyHtbi+tlQMkk\r\nhQIgJnls9RX1XngfNihcdfFT5irWaETGqZCDM3ElfgyxW3dAQmf921Couete\r\na5FMQM53z1k8OrVauKr43OaKq1avvfY8mhkaG3cLFcB6cYHnoJmfwhsnYb5k\r\nCBfA0h5hp3e3X619gl8AhmeoPhlEVjrDEy6wrl9cA27586f+Iu34p4yBs5zq\r\ndmJJ2GozYaIUD6eUUtm+mjo6s2/lnA9B1Oz+V26/tyFnbZ8QKYfqv+YU/Ued\r\nQGrDKbH11fyV0XpGJxWqY+aZKFK9fN7tU7oHObJolAIjq6oen7Vv8U46s32L\r\nPEbwwT5/KDM73UGSEcZFOaZkJXW4GObW+qb7kIlizLrExdvX5pPXwHSVQ0y8\r\nAMWEctpOcu0q4fsbytMseP+kZEMacfFYFKDJilqAF+nfAKFgpOYbscCKQAtT\r\nomMQni1ZiRUDy5KMoqRX4hj7zgR0TIvRL3U=\r\n=SrS/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.css","type":"module","scripts":{"test":"web-test-runner \"test/**/*.js\" --node-resolve","build":"sass src/index.scss index.css","prepublishOnly":"npm run build && npm test"},"_npmUser":{"name":"kkoryaka","email":"konstantin.koryaka@state.ca.gov"},"repository":{"url":"git+https://github.com/cagov/design-system.git#main","type":"git"},"_npmVersion":"7.21.0","description":"THe Highlight Section is a great way to showcase small bits of important information, and can be used to display services or features. ","directories":{},"_nodeVersion":"14.16.1","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.38.0","@open-wc/testing":"^3.0.1","@web/test-runner-puppeteer":"^0.10.2"},"_npmOperationalInternal":{"tmp":"tmp/ds-highlight-section_1.0.2_1651013747776_0.8083256083249111","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@cagov/ds-highlight-section","version":"1.0.3","keywords":[],"author":"","license":"ISC","_id":"@cagov/ds-highlight-section@1.0.3","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":"c323e1d08050e7f6a26f372fd9b998240962d7a5","tarball":"https://registry.npmjs.org/@cagov/ds-highlight-section/-/ds-highlight-section-1.0.3.tgz","fileCount":11,"integrity":"sha512-RpFEYgnzf3t8lxu7wLrlHA7m/HmZJdVQDkqjNWiItaIfFQbJVeRM/EarHeW8jbjXcupdFSB7MDgot4BN6/6HSA==","signatures":[{"sig":"MEUCIFXRsH9M4Q7qWiD75vgCQWZ4YyuFj68VUuSru8i9rFAZAiEAkCRgQ/pZoylUelzpxqy+VB5JFHyKMFJs3+yL8t30gJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":184117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidY7eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP0w//VqPbRJM+IpCIHpICNFJv42rtRsenKRV6jowyMX+OhC/069Ef\r\nomfJoMhggetiBvsj6DWhszIf7sH3EPCrtdoF7O5p58OqivJjeOEunTur1E/w\r\ng3AZqGBuiWwNVKFycYdMm9ot/BPQJ7a6S0Z9Uz1rHP6hnMKIfUqULwb+MAqb\r\najtFHAKvYiYEEKydB/wO9c0NFeSzke8BnxXQEQgqgPM/expl9jE2vVQ0aLEQ\r\nsv9oxlgR+9cBIkVwZkUxTmgperv3WBDPyxXkyOHkkXUgN5R7O5+8NEQefzzj\r\npXiZdC7g+Z4x/Fx7wUbcXhghn6I9SJJNQ6lsD7T4zPeXesr7h4ZkMgLZISya\r\nWWWWCqzRqjfipPEcdz9AANTMP0ByFtwTZUHFKt7/l4QgsbLzE3yYDg7CdQCt\r\nvPCnSqYdu/OpZNy6G1wJINrywaf5E2IrdeTnxcx7ZukmEYhJGgmGci0zmcZF\r\nw37RLI5HHmVgPqqtg4t6dKOCUnzsq4kxayuoSW/8JnkKuyRKLMWVFbeqAPsT\r\nXo02UUa3Ein6zMeilpVEnGH06SltGfzrVgNa43xoCxsp717bnC0+mrI0Aceo\r\n2I79LiWZYBubal5pInTZET/p8sDr5qKK33uxYWIU4qhszZA9gtks+6VuuIHl\r\nNMYfIjTnsB47wWQAf0XrxaiZxfZDHlaibVI=\r\n=XqnF\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","prepublishOnly":"npm run build && npm test"},"_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 Highlight Section is a great way to showcase small bits of important information, and can be used to display services or features. ","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-highlight-section_1.0.3_1651871454054_0.4414618050991026","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@cagov/ds-highlight-section","version":"2.0.0","keywords":[],"author":"","license":"ISC","_id":"@cagov/ds-highlight-section@2.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":"9de31a18c40472203b79cdb1190f83b2005ea5f0","tarball":"https://registry.npmjs.org/@cagov/ds-highlight-section/-/ds-highlight-section-2.0.0.tgz","fileCount":11,"integrity":"sha512-lZWyRS26ozYTjf4/mBaaFPERddS5TkvGemE+mCBvERHNvjfY8T8pB7eLvlJRmn7fOxZ5EflsSWWd7WAkNfIh0A==","signatures":[{"sig":"MEUCIQC4o1tY55yh2WviSrINP9+7IPeJGmR/74yBNsd6LK23tgIgcR7qN+EEcd7Q9KDkZi0dYkw8lxHlEnbVHB4m0DZd8Kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":184905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8Vr0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLHw//a1lHuLWc3XqcjEGP2eUY5Hp59WsPIZmB1Fz5YOvqL8QjA/Cr\r\nPdLxkxaVMiXUapYJ+KUWqSgcYTtrcapklVZvi0FWix/cqY/ZMGBBdE803rLD\r\nxgkNTvCwi9MQj+GEc14eVDiG4Ch1G3vrJ7B6HZFa4bTrJq50IAdtwMzQiVtf\r\n2r3wrigu8ieLiDNraVJkNeSlKgAVueMqY+YwRj/C+k0gx4/GL9AcmbgIJ5f/\r\n4F1wzoetGlOj5O/5R80Vu0SllJC4DXoDVkyH38MgfD2QS80MqKvuJIIR6wXi\r\nV2LEsw5CvKCeMyh7Jgv0le/cM1cMTaMRShiKhK5Pp+bfO7P4vV1IABOvI8c2\r\nItWZy3BS2m0kjwJYjHQYLB7liNgKrfHhoge5sqVWmtUorFkKL2kuf/4uqscm\r\n1PubE5ZwGECs6Vaxu5up/awyRyPIqx2FXcVoD8lZakqCrZFfN+oyO7YDKTdD\r\n7DnLm6+y7Q6O+EEl5323hhyW6M0yxoMWn3mhCUiCMPLvDzLApdIxmMjcUhKi\r\nU9lXug2GkuVO4AJcnEDkrDL8FtCxVv3LLH+Fl9Ip/pDkkWVfkqkyUkTvIJEe\r\nnRdWgHVdzUxL08i0JPzYxcSsa6dhLDcg4GPLii/oMEnoZW9SKrzETOS/drdf\r\nRFIvikv7Y2EirxaU8irMaudElOObOBTguOc=\r\n=SIjb\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","prepublishOnly":"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 Highlight Section is a great way to showcase small bits of important information, and can be used to display services or features. ","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-highlight-section_2.0.0_1659984627655_0.3975047092397237","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@cagov/ds-highlight-section","version":"2.0.1","keywords":[],"author":"","license":"ISC","_id":"@cagov/ds-highlight-section@2.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":"b7b67e54731b2501a7eb16147f178dca137a5c14","tarball":"https://registry.npmjs.org/@cagov/ds-highlight-section/-/ds-highlight-section-2.0.1.tgz","fileCount":11,"integrity":"sha512-iTb3Uo96/EpWztY+Iv8Jk2rVLc/NRYOu4vVqfzhk9TSL2FbBJII6rNtoR+kBJhZv88XuWQwEHcXuCHpWTGo7bg==","signatures":[{"sig":"MEUCIQDrrDb4OIZcIqJ4VJKrjIMFs/s9XkgeASKGvhi+gIHDhQIgP0FUELpujAWe7CZQzlqHVD6MHJrSOWCW2ytvQ9VRNnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":184916},"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","prepublishOnly":"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 Highlight Section is a great way to showcase small bits of important information, and can be used to display services or features. ","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-highlight-section_2.0.1_1709242282210_0.22668100404870306","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-01-19T23:46:09.601Z","modified":"2026-04-01T19:54:38.573Z","1.0.1":"2022-01-19T23:46:09.917Z","1.0.2":"2022-04-26T22:55:48.044Z","1.0.3":"2022-05-06T21:10:54.247Z","2.0.0":"2022-08-08T18:50:27.964Z","2.0.1":"2024-02-29T21:31:22.571Z"},"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 Highlight Section is a great way to showcase small bits of important information, and can be used to display services or features. ","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":"# Highlight section component\n\n## Description:\n\nHighlight section is a great way to showcase small bits of important information, and can be used to display services or features. \n\n## When and how to use it:\n\nUse this to catch attention and highlight the top tasks or business priorities. \n\n## Structure:\n\nHighlight section component consist of three parts: header with the main title, the body, and the footer. The body consists of two halves. First half contains concise a secondary title, and a subtitle, The second one has text description. The footer contains a call-to-action link. \n\n## Features:\n\nComponent is also incorporates full bleed background. \n\n\n## Screenshot\n<img src=\"img/highlight-section.png\">\n\n## HTML\n\n```\n        <cagov-highlight-section>\n          <article role=\"article\" class=\"full-bleed bg-highlight-lightest\">\n            <div class=\"container\">\n              <header class=\"highlight-header\">\n                <h2>Principles for people-centered digital services</h2>\n              </header>\n              <section class=\"highlight-body\">\n                <div class=\"highlight-image bg-primary-lightest\">\n                  <img src=\"https://california.azureedge.net/cdt/statetemplate/5.6.0/images/color.png\" alt=\"highlight section demo\"/>\n                </div>\n                <div class=\"highlight-text\">\n                  <h3>Prioritize accessibility</h3>\n                  <h4 class=\"mt-0\">Principle 3</h4>\n                  <p>Make your services accessible for all Californians. Think about people who have been traditionally excluded, like people who use screen readers or reside in low bandwidth regions.</p>\n                  <div class=\"wp-button\">\n                    <a class=\"btn-primary-outline\">See all the principles</a>\n                  </div>\n                </div>\n              </section>\n            </div>\n          </article>\n        </cagov-highlight-section>\n```\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 with your own text, alt text, and image.\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<link rel=\"stylesheet\" href=\"https://cdn.designsystem.webstandards.ca.gov/components/ds-highlight-section/v2.0.1/dist/index.css\">\n```\n\n### Expected variables\n\nThere are some colors that should be defined by the containing page.\n\nExpected definition is:\n\n```\n:root {\n  --white: #ffffff;\n  --primary-100: #b3c9eb;\n  --primary-700: #165ac2;\n  --primary-900: #003588;\n  --accent2-100: #ffecc1;\n  --accent2-500: #ac8226;\n  --w-lg: 1176px;\n  --s-1: 0.5rem;\n  --s-2: 1rem;\n  --s-2: 1rem;\n  --s-3: 1.5rem;\n  --s-4: 2rem;\n  --font-size-2: 1.125rem;\n  --font-weight-6: 600;\n  --font-lineheight-3: 1.5;\n  --border-1: 1px;\n  --border-2: 2px;\n  --radius-2: 4px;\n\n}\n```\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"}