Hi reader! This is my first blog post-tutorial ever :). I decided to write posts from my experience in Web and development. design Recently I got a task at my work to design the flow of purchase . It might sound weird but the component I came up with might be useful for displaying relational data. order through jobs Let`s Start The final component looks complex but in reality there is only one key component nested in each other. This is how our hero looks: So, it contains one parent element with N number of child elements. The component HTML structure is composed of two blocks: and **.hv-item-children -**wrapper for children. .hv-item-parent For styling we will use (because it`s really flex): flexbox We will get something like this: Cool! Actually this is what we want. Only one thing is missing. Guess what.. Exactly! - Lines, lines, lines! Creating lines For creating lines we’re going to use pseudo elements. Parent element will have only bottom line. Child element needs two lines — one vertical(on top of it) and one horizontal (which will connect children to each other). Here is the illustration what we are going to build: css Parent pseudo class: Child pseudo class: Our component is ready. Now you can replace . with any thing. If we replace one child element with entire component we will get nested hierarchi view as it’s shown below: hv-item-child here are of the component. DEMOS This is a repo of complete component with demos. GitHub And down here is a heart icon. If you click(or tap), it will turn into green 💚. Don`t believe? 😊 Try Thank you!
