lists

basic list

                
                    <div class='list-s bg-primary'>
                    <ul class='txt-primary'>
                        <li class='flx flx-min-center pd-xs list-itm'>
                            <span class='material-icons icon-primary mg-right-s'>
                                inbox
                            </span>
                            <p class='txt-cap txt-md'>
                                inbox
                            </p>
                        </li>
                        <li class='flx flx-min-center pd-xs list-itm'>
                            <span class='material-icons icon-primary mg-right-s'>
                                star
                            </span>
                            <p class='txt-cap txt-md'>
                                star
                            </p>
                        </li>
                        <li class='flx flx-min-center pd-xs list-itm'>
                            <span class='material-icons icon-primary mg-right-s'>
                                send
                            </span>
                            <p class='txt-cap txt-md'>
                                sent_mail
                            </p>
                        </li>
                        <li class='flx flx-min-center pd-xs list-itm'>
                            <span class='material-icons icon-primary mg-right-s'>
                                drafts
                            </span>
                            <p class='txt-cap txt-md'>
                                drafts
                            </p>
                        </li>
                        <li class='flx flx-min-center pd-xs list-itm'>
                            <span class='material-icons icon-primary mg-right-s'>
                                drafts
                            </span>
                            <p class='txt-cap txt-md'>
                                drafts
                            </p>
                        </li>
                    </ul>
                </div>
                
            

stacked list

                
                    <div class='list-md bg-primary'>
                        <ul class='txt-primary'>
                            <li class='list-itm pd-xs flx flx-maj-stretch flx-min-center'>
                                <div class='flx flx-min-center'>
                                    <img src='../../assets/avatar-1.jpg' class='brd-full mg-right-md' />
                                    <div
                                        <p class='txt-cap txt-md'>lioness</p>
                                        <p class='txt-cap txt-md'>hey! pick up the phone</p>
                                    </div>
                                </div>
                                <span class='material-icons icon-primary'>
                                    close
                                </span>
                            </li>
                            <li class='list-itm pd-xs flx flx-maj-stretch flx-min-center'>
                                <div class='flx flx-min-center'>
                                    <img src='../../assets/avatar-1.jpg' class='brd-full mg-right-md' />
                                    <div
                                        <p class='txt-cap txt-md'>lioness</p>
                                        <p class='txt-cap txt-md'>hey! pick up the phone</p>
                                    </div>
                                </div>
                                <span class='material-icons icon-primary'>
                                    close
                                </span>
                            </li>
                            <li class='list-itm pd-xs flx flx-maj-stretch flx-min-center'>
                                <div class='flx flx-min-center'>
                                    <img src='../../assets/avatar-1.jpg' class='brd-full mg-right-md' />
                                    <div
                                        <p class='txt-cap txt-md'>lioness</p>
                                        <p class='txt-cap txt-md'>hey! pick up the phone</p>
                                    </div>
                                </div>
                                <span class='material-icons icon-primary'>
                                    close
                                </span>
                            </li>
                            <li class='list-itm pd-xs flx flx-maj-stretch flx-min-center'>
                                <div class='flx flx-min-center'>
                                    <img src='../../assets/avatar-1.jpg' class='brd-full mg-right-md' />
                                    <div
                                        <p class='txt-cap txt-md'>lioness</p>
                                        <p class='txt-cap txt-md'>hey! pick up the phone</p>
                                    </div>
                                </div>
                                <span class='material-icons icon-primary'>
                                    close
                                </span>
                            </li>
                        </ul>
                    </div>
                
            

list css

                
                /* list sizes */

                .list-s {
                    width: 10rem;
                }
                    
                .list-md {
                    width: 20rem;
                }
                    
                .list-lg {
                    width: 40rem;
                }
                    
                .list-xlg {
                    width: 100%;
                }                    
                
            

list js

                
                const listItems = document.querySelectorAll('.list-itm')

                listItems.forEach((item) => {
                    item.addEventListener('mouseover', () => {
                        item.style.cursor = 'pointer'
                    })
                    item.addEventListener('click', () => {
                        listItems.forEach(item2 => {
                            item2.classList.remove('txt-600')
                            item2.classList.remove('bg-off-primary')    
                        })
                        item.classList.add('txt-600')
                        item.classList.add('bg-off-primary')
                    })  
                })