Uniform Canvas: component patterns

this is Tim from uniform and in this video we will discuss component patterns [Applause] [Music] components in uniform are highly flexible all their properties are easy to change and some of those are stylistic and some of them are more data driven so when we have a look at this hero component here you can actually say let's do the image to the left or change my copy a little bit and so due to this flexibility you can actually go highly deeply technical very fast because I could connect the title to a cmsa in the description to cmsb if I wanted to and so to make things a lot easier for your content editors we actually introduced component patterns and in these patterns you can say this is the setup of this component connected to this CMS and you are allowed to change these few Styles and of course what the content item in the CMS is and that makes things a lot easier so let's actually do that so this is our component here and let's hit save because I just set it up and then we go to Let's edit this definition so there's all the fields of the component that you can use right let's go and add a pattern of a combination of these fields that makes it easier to use for Content editors let's do a contentful connection so here now I can actually start having a look at what do I want my pattern to be you know what I want my image on the right I don't need a text above my title but my title itself needs to come from a CMS while I've already set up a data type two contentful ctas content types if you want to know how data types work there's another video in this series that explains it all so now I'm just going to select let's say this item and so we need to find the title in that item so you just go and there's the result of the API off contentful and you can select whatever you want here so you can imagine if you're a Content editor and you have to do this from scratch and you're not technical you don't even know what an API output is or a rest API this is quite challenging so when you create a pattern you can do this for the content editor and they can kind of just choose a curated list and then change the things that they need so let's also grab the image here and so now a few fields are Dynamic others I haven't touched yet so now you can go into overwrites and say these are the things you can change as content editors and a few things I don't want you to touch like the title or the description because it's Dynamic so I want the variant overrides like image Right image left and I also want to be able to add an eyebrow text and let's keep it at this for now and so all these properties are just from the uniform component starter kit if you build your own component you can use all your own properties this is completely agnostic and completely free to use in any way you like all right so let's go back to our home page and add our new component that we just created because when you create a component pattern it becomes a new entity so this is our initial hero and now let's add our new one there it is the hero for contentful you can see it's already connected to that item that I selected in there and So based on our overrides you can actually say well we overwrite we we gave an overwrite ability for the content so you can actually hit replace and say you know what I actually wanted this one and now this has become another item in contentful and the same fields are Dynamic right you cannot edit these now but certain things we can add it because you overwrite for the variant is still there so let's make it image left there's also an overwrite for the eyebrow text which you can now edit and because it's in uniform you can actually edit that inline which makes that really really special but specialty features comes from a dynamic item so it's not changeable and in this way you can kind of help content editors with a curated experience without going too deep into the tech but if they wanted to they can um now how about we add yet another hero pattern out of a list of latest blog posts because sometimes you might want a hero to highlight a blog post for example so let's go back to our component definition and just add another pattern that uses a combination of all these fields to show a latest blog post so we can just make another pattern and so now let's connect this title for example to my own articles and So currently this is giving me a list so I can kind of choose um so let's grab this one and select the title here and let's grab it's the same description and let's grab the image and how about for the eyebrow text we now connect it to let's say the date and as you see there's all these things now what we do want a certain amount of overwrite so let's allow the variation to be overwritten but not the content for this one just because I want to show you the different options um okay we're good we're just changing the the variation as content editors all right so let's go back to our home page and now add our new component because this again this is actually a pattern of a hero but we're actually making that a new entity so now we can see there's our block hero pattern and there it is so actually how about we set it to background image there it is and so the interesting bit here that's that not all content could always completely fit your design system like in this case the title is white and the image is a little light so if you give the option to do something like this or whatever you want um or default um that makes things really flexible and you can you know really work well in parallel with this because you can start content editing you can adopt your component and it just all works so this is what I wanted to show you about component patterns and if you now start to combine from our other videos the data types the loops the component patterns this is essentially the new way of content editing by being agnostic from all your external tools really having control over your design system and do it in a visual way cheers speak soon