HTML Patterns
HTML Patterns are predefined web page components to help design and create a website. These patterns are building units of a web page, and they structure the content within the HTML document. Patterns can include various types of content such as widgets, forms, tables, charts, buttons and more.
HTML Patterns will automatically adapt to fit the style and design of your website templates, and of course, you can edit them as much as you want.
How To Use HTML Patterns
Click on the tabs in the horizontal menu to select a Free and Open Source HTML Pattern collection.
Freedom To Choose
With Open Creative Cloud HTML Patterns you are free to choose the Free and Open Source HTML Patterns that are best for your project.
Flexbox Grid Layout
The flexible box layout module, usually referred to as flexbox, was designed as a one-dimensional layout model. Flexbox defines layout in one dimension at a time — either as a row or as a column. If you need two-dimensional grids, use CSS Grid Layout, which controls columns and rows together.
When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes.
The Main Axis
The Main Axis is defined by flex-direction, which has four possible values:
- row
- row-reverse
- column
- column-reverse
Example: flex-direction: row
Example: flex-direction: column
Multi-line flex containers with flex-wrap
While flexbox is a one dimensional model, it is possible to cause flex items to wrap onto multiple lines. If the flex items are too wide to all display in one line, they will wrap onto another line. Each line will be treated as a new flex container. Any space distribution will happen across that line, without reference to the lines on either side.
Example: flex-wrap: wrap
flex-flow shorthand
The properties flex-direction and flex-wrap can be combined into flex-flow shorthand. The first value specified is flex-direction and the second value is flex-wrap.
Example: flex-flow: row wrap
CSS Grid
The CSS grid layout module excels at dividing a page into major regions or defining the relationship in terms of size,
position, and layer, between parts of a control built from HTML primitives.
Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are
either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements
could position themselves so they actually overlap and layer, similar to CSS positioned elements.
CSS Grid Responsive Example
The example displays 3 items if the page is wide enough, then dynamically changes the layout as the page becomes narrower.
CSS Grid Line Based Example
The example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.
Messages
Show All![](img/user.jpg)
Jhon Doe
15 minutes ago![](img/user.jpg)
Jhon Doe
15 minutes ago![](img/user.jpg)
Jhon Doe
15 minutes ago![](img/user.jpg)
Jhon Doe
15 minutes agoCalendar
Show AllTo Do List
Show AllTestimonial
![](img/testimonial-1.jpg)
Client Name
Profession
Dolor et eos labore, stet justo sed est sed. Diam sed sed dolor stet amet eirmod eos labore diam
![](img/testimonial-2.jpg)
Client Name
Profession
Dolor et eos labore, stet justo sed est sed. Diam sed sed dolor stet amet eirmod eos labore diam
Basic Form
Horizontal Form
Floating Label
File Input
Select
Check, Radio & Switch
Input Group
Sizing
Basic Table
# | First Name | Last Name | |
---|---|---|---|
1 | John | Doe | jhon@email.com |
2 | Mark | Otto | mark@email.com |
3 | Jacob | Thornton | jacob@email.com |
Accented Table
# | First Name | Last Name | |
---|---|---|---|
1 | John | Doe | jhon@email.com |
2 | Mark | Otto | mark@email.com |
3 | Jacob | Thornton | jacob@email.com |
Hoverable Table
# | First Name | Last Name | |
---|---|---|---|
1 | John | Doe | jhon@email.com |
2 | Mark | Otto | mark@email.com |
3 | Jacob | Thornton | jacob@email.com |
Color Table
# | First Name | Last Name | |
---|---|---|---|
1 | John | Doe | jhon@email.com |
2 | Mark | Otto | mark@email.com |
3 | Jacob | Thornton | jacob@email.com |
Bordered Table
# | First Name | Last Name | |
---|---|---|---|
1 | John | Doe | jhon@email.com |
2 | Mark | Otto | mark@email.com |
3 | Jacob | Thornton | jacob@email.com |
Table Without Border
# | First Name | Last Name | |
---|---|---|---|
1 | John | Doe | jhon@email.com |
2 | Mark | Otto | mark@email.com |
3 | Jacob | Thornton | jacob@email.com |
Responsive Table
# | First Name | Last Name | Country | ZIP | Status | |
---|---|---|---|---|---|---|
1 | John | Doe | jhon@email.com | USA | 123 | Member |
2 | Mark | Otto | mark@email.com | UK | 456 | Member |
3 | Jacob | Thornton | jacob@email.com | AU | 789 | Member |