WordPress / wporg-parent-2021

17 stars 10 forks source link

Add Cards style for lists #107

Closed adamwoodnz closed 11 months ago

adamwoodnz commented 11 months ago

Required for the Developer home page, and subsequent redesigns.

Should support 2 and 3 column configuration. 3 columns should change to 2 on medium screens, and both to one on small screens.

This initial style will be added to list blocks. The expected markup is:

<ul>
    <li>
        <a>
            <strong>{title}</strong></br>{detail}
       </a>
    </li>
</ul>

States:

Card

Developer Design:

adamwoodnz commented 11 months ago

After reviewing the designs again, the markup is better modelled as a grid group of H3s, rather than a list:

<div class="wp-block-group wp-block-group-is-layout-grid">
    <h3>
        <a>
            <strong>{title}</strong>{detail}
       </a>
    </h3>
</div>