{"_id":"@bolttech/ob-atoms-vertical-card","_rev":"4-79b64094d3e62bd002f5bf430e64d51a","name":"@bolttech/ob-atoms-vertical-card","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bolttech/ob-atoms-vertical-card","version":"1.0.0","_id":"@bolttech/ob-atoms-vertical-card@1.0.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"80dab4ae6f6b9616d619dcecfc33dbb119becee7","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-vertical-card/-/ob-atoms-vertical-card-1.0.0.tgz","fileCount":9,"integrity":"sha512-8dwCJR2ntQkHeUuxyyGYwSZ5/KMZvUg2NbDkhcdb6UXMMb2QE3V3khPx8et0Cc6f+XEE725QF9yJS3Mm1P9U6Q==","signatures":[{"sig":"MEQCIDCinGTm3ghVErDF/z+nStejV0NZ79PceQv5HYXdpongAiBJUXcXzvRD+RbXdG+N8DgR8MMDNEUTODS/K4viTAY1nQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":51930},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"ac6a585004327358aca4299741ef6b8a7c79ed0b","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"11.10.1","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"@bolttech/ui-utils":"0.6.5"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-vertical-card_1.0.0_1778516240873_0.19898257357341786","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-atoms-vertical-card","version":"1.0.1","_id":"@bolttech/ob-atoms-vertical-card@1.0.1","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"c555da98ca69aef7aa021435bfe0e04289370645","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-vertical-card/-/ob-atoms-vertical-card-1.0.1.tgz","fileCount":5,"integrity":"sha512-oyuQlrvVRaR8GM5nUWWrai3noxfXHwYli4aZkVNvOYJypIywKzKHt4s0tiBNU2UUVKImec6tiR58VnqwVl+B2A==","signatures":[{"sig":"MEYCIQC0Jrl6/UnOTRpfPS6bj7hup1/nNaLzg+68Y1Bhqc3xuwIhAJKE7i1yK7b2brpYMpgeJJjO3H69GCaRkujDg3S4cgsX","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":48215},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"655079398da301401d9a51e2147a450ef84aa2ef","_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"_npmVersion":"10.9.4","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/atoms-icon":"0.24.8"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-vertical-card_1.0.1_1780927353645_0.8140422794573883","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-atoms-vertical-card","version":"1.0.2","_id":"@bolttech/ob-atoms-vertical-card@1.0.2","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"8bc5652f2957d5fcdfe0f4193fac0e3730d703fa","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-vertical-card/-/ob-atoms-vertical-card-1.0.2.tgz","fileCount":9,"integrity":"sha512-v3hrl4/nA4kkIs/TpS7u86Qh6+mnChnSd2kTdCbfi1FZNePaxzX7I3uSBpbLtiWiETY1c9fVpX1JvtbaOya6gw==","signatures":[{"sig":"MEUCIQDGLF1uimdlgJ1l4BKqozq3UMaAnyEA8ibVL/046v1IewIgD+1LvOnPa2FOsaAezWjwFIJL2Y8+taub0BcqcGLaUys=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50793},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"d90040aa85336a8513760dc4e69789894bb50f69","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"10.9.8","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/atoms-icon":"0.24.9"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-vertical-card_1.0.2_1788779535083_0.40904336204542946","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@bolttech/ob-atoms-vertical-card","version":"1.0.3","dependencies":{"@bolttech/atoms-icon":"0.24.9","@bolttech/ui-utils":"0.6.7","react":"19.1.2","classnames":"^2.5.1"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/ob-atoms-vertical-card@1.0.3","gitHead":"7f9bcf7b27194fffb5d952d1e4d3eb968a32c416","description":"The **VerticalCard** component is a React component designed to display vertical cards with images, titles, and descriptions. It can be used to create visually appealing content sections in your application.","_nodeVersion":"22.17.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-3IcO9w0dK+ZOsU5n30i28sXcPxQyrgcYEPg0egwtf5IPcQHHyKRwnCrFTOMOLK7QULL0XIKwApKH5pvubgFY4Q==","shasum":"520c0582311d6ab938cab18d8bb45936b09b4acd","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-vertical-card/-/ob-atoms-vertical-card-1.0.3.tgz","fileCount":8,"unpackedSize":54194,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC6MP+WkNp9Pqo/zwLKc4Cydx0CwFr1FezezYf4jRV/gQIhAJiPZ03Q6b/1aOoDiAVeRY48O7WYvKLzd6Dn/hskdrnv"}]},"_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"directories":{},"maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ob-atoms-vertical-card_1.0.3_1788796777404_0.4099337048692908"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T16:17:20.801Z","modified":"2026-09-07T15:59:37.751Z","1.0.0":"2026-05-11T16:17:21.022Z","1.0.1":"2026-06-08T14:02:33.785Z","1.0.2":"2026-09-07T11:12:15.213Z","1.0.3":"2026-09-07T15:59:37.537Z"},"description":"The **VerticalCard** component is a React component designed to display vertical cards with images, titles, and descriptions. It can be used to create visually appealing content sections in your application.","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"readme":"# Vertical Card Component\n\nThe **VerticalCard** component is a React component designed to display vertical cards with images, titles, and descriptions. It can be used to create visually appealing content sections in your application.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n- [Example](#example)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n\nTo use the **VerticalCard** component in your React application, follow these steps:\n\n```bash\nnpm install @bolttech/atoms-vertical-card\n```\n\nor\n\n```bash\nyarn add @bolttech/atoms-vertical-card\n```\n\nOnce you have the required dependencies installed, you can start using the `VerticalCard` component in your React application.\n\n## Usage\n\nThe **VerticalCard** component provides an easy way to create vertical cards with images, titles, and descriptions. This can be used to showcase content in a visually appealing manner.\n\nTo use the component, import it and include it in your JSX:\n\n```jsx\nimport React from 'react';\nimport {VerticalCard} from '@bolttech/atoms-vertical-card';\n\nfunction App() {\n  const imageCard = {\n    url: 'image-url.jpg',\n    alt: 'Image Alt Text',\n  };\n\n  return (\n    <VerticalCard\n      variant=\"default\"\n      imageCard={imageCard}\n      title=\"Card Title\"\n      description=\"Card Description\"\n      dataTestId=\"vertical-card-section\"\n    />\n  );\n}\n\nexport default App;\n```\n\n## Props\n\nThe **VerticalCard** component accepts the following props:\n\n| Prop          | Type             | Description                                            |\n|---------------|------------------|--------------------------------------------------------|\n| `variant`     | string           | The variant style of the vertical card.                |\n| `imageCard`   | ImageByUrl or React.ReactElement | The image displayed in the vertical card.            |\n| `title`       | string           | The title of the vertical card.                       |\n| `description` | string           | The description of the vertical card.                 |\n| `dataTestId`  | string           | The data-testid attribute for testing purposes.        |\n\nThe `ImageByUrl` type is an object with the following properties:\n\n| Property      | Type             | Description                                            |\n|---------------|------------------|--------------------------------------------------------|\n| `url`         | string           | The URL of the image.                                 |\n| `alt`         | string           | The alternative text for the image.                   |\n\n## Example\n\nHere's an example of using the **VerticalCard** component:\n\n```jsx\n<VerticalCard\n  variant=\"default\"\n  imageCard={{ url: 'image-url.jpg', alt: 'Image Alt Text' }}\n  title=\"Card Title\"\n  description=\"Card Description\"\n  dataTestId=\"vertical-card-section\"\n/>\n```\n\nThis will render a vertical card with an image, a title, and a description.\n\n## Contributing\n\nContributions to the **VerticalCard** component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.\n","readmeFilename":"README.md"}