Webflow Basic Card Layout - with Flexbox

hey everyone travis here i'm going to show you how to build this layout in webflow using the cms collection type and flexbox display so we can see here it's three columns on desktop as we go down to a tablet it drops to two columns and then on a phone it's one column so let's jump over to a blank project and take a look at how to do this i'm gonna start off by adding a cms collection so we're gonna go in here to create a collection we'll start with a template of blog posts and we're going to adjust a little bit of this so i'm going to take the remove the color remove featured and for the post summary i'm going to give it a minimum character count of 90 oops and a maximum character count of 140. so we'll save that go ahead and create this collection we'll have webflow generate 10 dummy items for us let's go back over to add elements we're going to add a section and adding a container let's expand this let's name each of these so that we can style them um let's give it some base styling we'll just add 60 pixels of padding to the top and bottom to give ourselves some breathing room and then for the container we're going to make this a max width max width of 1200 pixels and 15 pixels of padding in the left and right okay that looks good the next thing we want to do is add our collection list in here so i'm going to click on that for the source i'm going to select blog posts for the layout i'm going to keep this on a full width layout we're going to code a flexbox layout or i'm sorry we're going to build a flexbox layout in this demo so we're going to leave that just the way it is we're going to go back over to show all settings we want to paginate the items to 6 per page and i think that's good for now we're going to go back over to this container expand out this whole tree so i want to rename these i don't want this to be collection list wrapper we're going to rename everything for cards that way we can use it across the project so this will become a card list wrapper this will become a card list this will be a card item next thing i want to do is i'm going to add in an image drag that in we're going to get this image from the blog post cms for the name it's i'm sorry for the field it's going to be thumbnail image that looks good next thing we want to do is add a heading h3 and we're going to get the text from the blog post it's going to be the name of the post okay cool there next thing we're going to do is start adjusting this layout to look more of the layout that we're going for so we're going to click on the card list give this a display of flex and then we're going to turn the children to wrap because we want this to wrap multiple lines so let's go back over to the card item give this a max width of 31 percent and then we're gonna go back up to the card list and because we want these a little bit of spacing in between each of these we're going to do the justify to space between okay looking good there for the card item let's give it some space on the bottom we'll say uh 40 pixels margin bottom we're going to click on the heading here and add a paragraph and then we're oh and then for the text of that paragraph we're going to say get the text from the blog post and that's going to be the post summary looks good the next thing we want to do is we want to add a one more uh text block in here and this is going to be for the date so this will be the created on date of the blog post the format will be aug22 looks good okay the next thing we want to do here is let's name everything so we have card image then we have card heading card summary and card date okay so the next thing that we want to do is if we look back at our example here we notice that we have this bottom part of the card that has like some space in between here so let's go ahead and add that we're going to achieve that we're going to go back over to our project click on the card image we're going to add a div block that'll put it underneath the image and what we want to do is we want to drag in all of these elements into this div block so the heading the summary and the card date and let's give this div block a name card bottom okay so let's take the card bottom and i'm going to hold shift and drag and i'm going to give this 20 pixels of padding and the next thing i want to do is i'm going to click on the card heading this has a margin top i'm going to remove that and okay so looking a little bit better here we look back at the example we can see this has like a drop shadow behind it so let's add that so i'm noticing one thing here is that we want this whole area to be clickable as well so i'm going to click on the card item and add a link block so let's drag this right underneath the card item as the first child of the card item let's add in add the card bottom and the card image into that link block so now this whole thing will be clickable uh we can see that the link block gave us some styles that we don't really want so what i'm going to do is i'm going to click on the link block that actually so the link block propagates its styles down so if we click on this we can edit all these styles at one time so let's override these we're going to make this a color of 31 31 31 and we're going to remove the text decoration underline okay so that gets us back close to what we want so as we're going to stay on the link block here we're going to go down to box shadows we're going to add one for the distance 1 pixel is fine blur is 10 pixels and then a size of 1 pixel and for the color we're going to do 2 2 2 enter and an alpha of 30. okay looking good there the next thing we want to do is i know this was a little bit styled so we're going to give this the date a weight of semi-bold 600 and we're going to change the color on it to 76 76 76 okay looking good here the next thing that we want to do is we'll start to look at this on different screen sizes so if we look at a tablet we can see that this is three columns and we want the stack should be two on a tablet so we're going to click on the cart item here and we're going to give this a max width of 49 percent that'll make it a two-column layout on tablet so that looks good next thing we want to do let's take a look at it on mobile on mobile landscape this is probably okay um but then on a phone or i'm sorry on portrait mode it's definitely too too stacked here so what we're going to do is stay on the card item we're going to give this a max width of 100 it'll put each card item on its own line the next thing we want to do let's tighten up the spacing a little bit on mobile so staying on the card item let's give this padding or i'm sorry margin bottom of 15 pixels and let's take down the type a little bit let's make this like 20 pixels and the height of 1.3 dash okay that's looking a little bit better i think this actually needs a little bit more room at the bottom i'm going to go back to the card item give this 20 pixels of margin bottom okay and that looks pretty good so as you can see we have three columns on desktop two columns on a tablet and then one column on a phone so this is looking good yeah so if you have any questions go ahead and leave a comment down below don't forget to like comment and subscribe and if you want to see uh more webflow tutorials go ahead and check out my other videos thank you [Music] you

Channel: Build with Travis

Views: 2,363

Keywords: webflow card layout, webflow cards, webflow flexbox tutorial, webflow flexbox cards, webflow create CMS, flexbox card layout, webflow blog cards, webflow blog layout, webflow card tutorial

Id: zfhYCoAasfA

Length: 8min 52sec (532 seconds)

Published: Sat Aug 22 2020