{% from "components/card/_macro.njk" import onsCard %}
<div class="ons-container">
    <div class="ons-grid">
        <div class="ons-grid__col ons-col-4@m">
            {{
                onsCard({
                    "title": {
                        "id": 'card-with-list-1',
                        "text": 'About the census',
                        "url": '#0'
                    },
                    "body":{
                        "id": 'text1',
                        "text": 'The census is a survey that gives us information about all the households in England and Wales.',
                        "itemsList": [
                            {
                                "url": '#0',
                                "text": 'List item 1 about the census'
                            },
                            {
                                "url": '#0',
                                "text": 'List item 2 about the census'
                            }
                        ]
                    }
                })
            }}
        </div>

        <div class="ons-grid__col ons-col-4@m">
            {{
                onsCard({
                    "title": {
                        "id": 'card-with-list-2',
                        "text": 'Working on the census',
                        "url": '#0'
                    },
                    "body":{
                        "id": 'text2',
                        "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
                        "itemsList": [
                            {
                                "url": '#0',
                                "text": 'List item 1 about working on the census'
                            },
                            {
                                "url": '#0',
                                "text": 'List item 2 about working on the census'
                            }
                        ]
                    }
                })
            }}
        </div>

        <div class="ons-grid__col ons-col-4@m">
            {{
                onsCard({
                    "title": {
                        "id": 'card-with-list-3',
                        "text": 'Your data and security',
                        "url": '#0'
                    },
                    "body":{
                        "id": 'text3',
                        "text": 'How we keep your data safe and what happens to your personal information.',
                        "itemsList": [
                            {
                                "url": '#0',
                                "text": 'List item 1 about your data and security'
                            },
                            {
                                "url": '#0',
                                "text": 'List item 2 about your data and security'
                            }
                        ]
                    }
                })
            }}
        </div>
    </div>
</div>