import { OntarioCardCollection } from '@ongov/ontario-design-system-component-library-react';
import { OntarioCard } from '@ongov/ontario-design-system-component-library-react';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
# ontario-card-collection
Use a card-collection to encapsulate the card components.
## Usage Guidance
The `ontario-card-collection` component should be used in conjunction with the `ontario-card` component. Please reference the [`ontario-card`](../ontario-card/) readme for further details.
## Configuration
Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the `ontario-card-collection` component can be added directly into the project's code, and can be customized by updating the properties outlined [here](#properties). Please see the [examples](#examples) below for how to configure the component.
## Examples
Example of a bare-bones `ontario-card-collection` component, with a `cardsPerRow` property.
```mdx-code-block
```
```html
```
```mdx-code-block
```
```tsx
```
```mdx-code-block
```
```html
```
```mdx-code-block
```
## Overview
Ontario Card Collection lays out multiple cards in a responsive grid.
For component guidance, see:
- https://designsystem.ontario.ca/developer-docs/components/ontario-card-collection/
## Properties
| Property | Attribute | Description | Type | Default |
| ------------- | --------------- | ------------------------------------------------------------------------------------- | ------------- | ------- |
| `cardsPerRow` | `cards-per-row` | The number of cards to display per row. If no number is passed, it will default to 3. | `2 \| 3 \| 4` | `3` |
---
_Built with [StencilJS](https://stenciljs.com/)_