[cds] Full width card

[mathisloge]

I'm trying the new cds.
But I'm struggeling to get a simple full width card to work.
I've expected something like that to work:

<section cds-layout="grid gap:lg">
    <cds-card cds-layout="col:12">
      <div>
        <h2 cds-text="section">Card Title</h2>
        <div cds-text="body light" cds-layout="p-y:lg">
        </div>
        <cds-divider cds-card-remove-margin></cds-divider>
        <div cds-layout="horizontal gap:sm p-y:sm align:vertical-center"></div>
      </div>
    </cds-card>
</section>

The red rectangle is the expected size.

What am I missing?

[hippee-lee]

An easy way to do this is to change the cards --width custom property. It ships with fit-content but you can target your cards and set it to something that suites your needs.
essentially, you need to write css that targets the cards you want to be full width. The core components expose a variety of custom properties to help consumers override / customize what gets shipped by default. You can see the list for cards here, in the API table at the bottom of the page.

    <style>
      cds-card {
        --width: 100%;
      }
    </style>

Here is a simple example.

[mathisloge]

thanks!