Card with Header and List

In this example below you will see how to do a Card with Header and List with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by imagendev, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright imagendev ©
  • HTML
  • CSS
  • JavaScript
    <div class="cardHolder">
  <div class="cardHolderInner">
    
    <div class="card card--sets">
      <div class="card-titleWrap">
        <h2 class="card-title">List items with title, image and date</h2>
      </div>

       <div class="card-listWrap">
         
        <ul class="card-list">
         
            <li class="card-listItem">
              <div class="card-listItemContent">
                <a title="View record" class="card-listItemThumb" tabindex="-1" href="#?">
                  <img class="card-listItemThumbImg" src="https://dev-guide.grange.local/style-guide/img/card-images/1.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemData">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemBorder">
                    <div class="card-listItemDate">
                      <span class="created-date">11th February 2018</span>
                      <span class="created-at">@</span><span class="created-time created-time--record">08:56</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="card-listItem">
              <div class="card-listItemContent">
                <a title="View record" class="card-listItemThumb" tabindex="-1" href="#?">
                  <img class="card-listItemThumbImg" src="https://dev-guide.grange.local/style-guide/img/card-images/2.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemData">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemBorder">
                    <div class="card-listItemDate">
                      <span class="created-date">15th February 2018</span>
                      <span class="created-at">@</span><span class="created-time created-time--record">08:56</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="card-listItem">
              <div class="card-listItemContent">
                <a title="View record" class="card-listItemThumb" tabindex="-1" href="#?">
                  <img class="card-listItemThumbImg" src="https://dev-guide.grange.local/style-guide/img/card-images/3.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemData">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemBorder">
                    <div class="card-listItemDate">
                      <span class="created-date">16th February 2018</span>
                      <span class="created-at">@</span><span class="created-time created-time--record">08:56</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="card-listItem">
              <div class="card-listItemContent">
                <a title="View record" class="card-listItemThumb" tabindex="-1" href="#?">
                  <img class="card-listItemThumbImg" src="https://dev-guide.grange.local/style-guide/img/card-images/4.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemData">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemBorder">
                    <div class="card-listItemDate">
                      <span class="created-date">6th February 2018</span>
                      <span class="created-at">@</span><span class="created-time created-time--record">08:56</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            
        </ul>
    
      </div>
    
    </div>
    
    <div class="card card--sets">
      <div class="card-titleWrap">
        <h2 class="card-title">Title, image, date and context menu</h2>
      </div>

       <div class="card-listWrap">
         
        <ul class="card-list">
         
            <li class="card-listItem">
              <div class="card-listItemContent">
                <a title="View record" class="card-listItemThumb" href="#?">
                  <img class="card-listItemThumbImg" src="https://dev-guide.grange.local/style-guide/img/card-images/2.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemData">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemBorder">
                    <div class="card-listItemDate">
                      <span class="created-date">11th February 2018</span>
                      <span class="created-at">@</span><span class="created-time created-time--record">08:56</span>
                    </div>
                  </div>
                  <div class="contextMenu contextMenu--cardListItem">
                    <button class="IWmenu_link"><i class="iw-icon iw-icon-more"></i>
                  </div>
                </div>
              </div>
            </li>

            <li class="card-listItem">
              <div class="card-listItemContent">
                <a title="View record" class="card-listItemThumb" href="#?">
                  <img class="card-listItemThumbImg" src="https://dev-guide.grange.local/style-guide/img/card-images/1.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemData">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemBorder">
                    <div class="card-listItemDate">
                      <span class="created-date">15th February 2018</span>
                      <span class="created-at">@</span><span class="created-time created-time--record">08:56</span>
                    </div>
                  </div>
                  <div class="contextMenu contextMenu--cardListItem">
                    <button class="IWmenu_link"><i class="iw-icon iw-icon-more"></i>
                  </div>
                </div>
              </div>
            </li>

            <li class="card-listItem">
              <div class="card-listItemContent">
                <a title="View record" class="card-listItemThumb" href="#?">
                  <img class="card-listItemThumbImg" src="https://dev-guide.grange.local/style-guide/img/card-images/4.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemData">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemBorder">
                    <div class="card-listItemDate">
                      <span class="created-date">16th February 2018</span>
                      <span class="created-at">@</span><span class="created-time created-time--record">08:56</span>
                    </div>
                  </div>
                  <div class="contextMenu contextMenu--cardListItem">
                    <button class="IWmenu_link"><i class="iw-icon iw-icon-more"></i>
                  </div>
                </div>
              </div>
            </li>

            <li class="card-listItem">
              <div class="card-listItemContent">
                <a title="View record" class="card-listItemThumb" href="#?">
                  <img class="card-listItemThumbImg" src="https://dev-guide.grange.local/style-guide/img/card-images/3.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemData">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemBorder">
                    <div class="card-listItemDate">
                      <span class="created-date">6th February 2018</span>
                      <span class="created-at">@</span><span class="created-time created-time--record">08:56</span>
                    </div>
                  </div>
                  <div class="contextMenu contextMenu--cardListItem">
                    <button class="IWmenu_link"><i class="iw-icon iw-icon-more"></i>
                  </div>
                </div>
              </div>
            </li>
            
        </ul>
    
      </div>
    
    </div>
    
    <div class="card card--sets">
      <div class="card-titleWrap">
        <h2 class="card-title">Title, image, date, context menu and grippy</h2>
      </div>
       <div class="card-listWrap">
         
        <ul class="card-list">
         
            <li class="card-listItem card-listItem--extended">
              <i class="iw-icon-grippy iw_tool_tip_link"></i>
              <div class="card-listItemContent">
                <a title="View record" class="card-listItemThumb" href="#?">
                  <img class="card-listItemThumbImg" src="https://dev-guide.grange.local/style-guide/img/card-images/3.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemData">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemBorder">
                    <div class="card-listItemDate">
                      <span class="created-date">11th February 2018</span>
                      <span class="created-at">@</span><span class="created-time created-time--record">08:56</span>
                    </div>
                  </div>
                  <div class="contextMenu contextMenu--cardListItem">
                    <button class="IWmenu_link"><i class="iw-icon iw-icon-more"></i>
                  </div>
                </div>
              </div>
            </li>

            <li class="card-listItem card-listItem--extended">
              <i class="iw-icon-grippy iw_tool_tip_link"></i>
              <div class="card-listItemContent">
                <a title="View record" class="card-listItemThumb" href="#?">
                  <img class="card-listItemThumbImg" src="https://dev-guide.grange.local/style-guide/img/card-images/4.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemData">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemBorder">
                    <div class="card-listItemDate">
                      <span class="created-date">15th February 2018</span>
                      <span class="created-at">@</span><span class="created-time created-time--record">08:56</span>
                    </div>
                  </div>
                  <div class="contextMenu contextMenu--cardListItem">
                    <button class="IWmenu_link"><i class="iw-icon iw-icon-more"></i>
                  </div>
                </div>
              </div>
            </li>

            <li class="card-listItem card-listItem--extended">
              <i class="iw-icon-grippy iw_tool_tip_link"></i>
              <div class="card-listItemContent">
                <a title="View record" class="card-listItemThumb" href="#?">
                  <img class="card-listItemThumbImg" src="https://dev-guide.grange.local/style-guide/img/card-images/2.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemData">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemBorder">
                    <div class="card-listItemDate">
                      <span class="created-date">16th February 2018</span>
                      <span class="created-at">@</span><span class="created-time created-time--record">08:56</span>
                    </div>
                  </div>
                  <div class="contextMenu contextMenu--cardListItem">
                    <button class="IWmenu_link"><i class="iw-icon iw-icon-more"></i>
                  </div>
                </div>
              </div>
            </li>

            <li class="card-listItem card-listItem--extended">
              <i class="iw-icon-grippy iw_tool_tip_link"></i>
              <div class="card-listItemContent">
                <a title="View record" class="card-listItemThumb" href="#?">
                  <img class="card-listItemThumbImg" src="https://dev-guide.grange.local/style-guide/img/card-images/1.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemData">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemBorder">
                    <div class="card-listItemDate">
                      <span class="created-date">6th February 2018</span>
                      <span class="created-at">@</span><span class="created-time created-time--record">08:56</span>
                    </div>
                  </div>
                  <div class="contextMenu contextMenu--cardListItem">
                    <button class="IWmenu_link"><i class="iw-icon iw-icon-more"></i>
                  </div>
                </div>
              </div>
            </li>
            
        </ul>
    
      </div>
    </div>
    
    <div class="card card--sets">
      <div class="card-titleWrap">
        <h2 class="card-title">Title, image, date, context menu and content</h2>
      </div>
       <div class="card-listWrap">
         
        <ul class="card-list">
         
            <li class="card-listItem card-listItem--extended">
              <div class="card-listItemContent">
                <div class="card-listItemImageDate">
                <a title="View record" class="card-listItemThumb card-listItemThumb--extended" href="#?">
                  <img class="card-listItemThumbImg card-listItemThumb--extended" 
                       src="https://dev-guide.grange.local/style-guide/img/card-images/4.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemDate card-listItemDate--extended">
			            <div class="card-listItemDateValue">
                    <span class="created-date">7th November 2017</span>
                    <span class="created-at">@</span>
                    <span class="created-time">16:31</span>    
                  </div>		
                </div>
              </div>
                <div class="card-listItemData card-listItemData--extended">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemInfo--extended card-listItemBorder">
                    <div class="card-listItemInfoDetails">
                      <p>Add list item content here</p>
                      <p>Style as needed for the module you are working on</p>
                      <div>You can use any element here to display the list contents</div>
                    </div>
                  </div>
                  <div class="contextMenu contextMenu--cardListItem">
                    <button class="IWmenu_link"><i class="iw-icon iw-icon-more"></i>
                  </div>
                </div>
              </div>
            </li>

            <li class="card-listItem card-listItem--extended">
              <div class="card-listItemContent">
                <div class="card-listItemImageDate">
                <a title="View record" class="card-listItemThumb card-listItemThumb--extended" href="#?">
                  <img class="card-listItemThumbImg card-listItemThumb--extended" 
                       src="https://dev-guide.grange.local/style-guide/img/card-images/3.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemDate card-listItemDate--extended">
			            <div class="card-listItemDateValue">
                    <span class="created-date">7th November 2017</span>
                    <span class="created-at">@</span>
                    <span class="created-time">16:31</span>    
                  </div>		
                </div>
              </div>
                <div class="card-listItemData card-listItemData--extended">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemInfo--extended card-listItemBorder">
                    <div class="card-listItemInfoDetails">
                      <p>Add list item content here</p>
                      <p>Style as needed for the module you are working on</p>
                      <div>You can use any element here to display the list contents</div>
                    </div>
                  </div>
                  <div class="contextMenu contextMenu--cardListItem">
                    <button class="IWmenu_link"><i class="iw-icon iw-icon-more"></i>
                  </div>
                </div>
              </div>
            </li>

            <li class="card-listItem card-listItem--extended">
              <div class="card-listItemContent">
                <div class="card-listItemImageDate">
                <a title="View record" class="card-listItemThumb card-listItemThumb--extended" href="#?">
                  <img class="card-listItemThumbImg card-listItemThumb--extended" 
                       src="https://dev-guide.grange.local/style-guide/img/card-images/2.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemDate card-listItemDate--extended">
			            <div class="card-listItemDateValue">
                    <span class="created-date">7th November 2017</span>
                    <span class="created-at">@</span>
                    <span class="created-time">16:31</span>    
                  </div>		
                </div>
              </div>
                <div class="card-listItemData card-listItemData--extended">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemInfo--extended card-listItemBorder">
                    <div class="card-listItemInfoDetails">
                      <p>Add list item content here</p>
                      <p>Style as needed for the module you are working on</p>
                      <div>You can use any element here to display the list contents</div>
                    </div>
                  </div>
                  <div class="contextMenu contextMenu--cardListItem">
                    <button class="IWmenu_link"><i class="iw-icon iw-icon-more"></i>
                  </div>
                </div>
              </div>
            </li>

            <li class="card-listItem card-listItem--extended">
              <div class="card-listItemContent">
                <div class="card-listItemImageDate">
                <a title="View record" class="card-listItemThumb card-listItemThumb--extended" href="#?">
                  <img class="card-listItemThumbImg card-listItemThumb--extended" 
                       src="https://dev-guide.grange.local/style-guide/img/card-images/1.jpg" alt="Example list item image">
                </a>
                <div class="card-listItemDate card-listItemDate--extended">
			            <div class="card-listItemDateValue">
                    <span class="created-date">7th November 2017</span>
                    <span class="created-at">@</span>
                    <span class="created-time">16:31</span>    
                  </div>		
                </div>
              </div>
                <div class="card-listItemData card-listItemData--extended">
                  <div class="card-listItemHead">
                    <div class="card-listItemTitle">
                      <a title="Example list item" class="u-link" href="#">List item title</a>
                    </div>
                  </div>
                  <div class="card-listItemInfo card-listItemInfo--extended card-listItemBorder">
                    <div class="card-listItemInfoDetails">
                      <p>Add list item content here</p>
                      <p>Style as needed for the module you are working on</p>
                      <div>You can use any element here to display the list contents</div>
                    </div>
                  </div>
                  <div class="contextMenu contextMenu--cardListItem">
                    <button class="IWmenu_link"><i class="iw-icon iw-icon-more"></i>
                  </div>
                </div>
              </div>
            </li>
            
        </ul>
    
      </div>
    </div>
   
  </div>
</div>

/*Downloaded from https://www.codeseek.co/imagendev/card-with-header-and-list-EQbRYY */
    Body {
  margin: 0;
  padding: 1.5rem 0;
}


/*Downloaded from https://www.codeseek.co/imagendev/card-with-header-and-list-EQbRYY */
    

Comments