Styled Lists & Tables (Demo)
[vc_row][vc_column][gem_custom_header title_width=”900″ subtitle=”TheGem delivers awesome tables in 3 different styles. All tables are responsive – just check this page with your mobile device to see how it looks like. Also you can choose between 15 customizable bullets in different colors for impressive styled lists.” subtitle_width=”900″ icon_position=”gem-custom-header-icon-position-right” background_style=”cover” container=”1″ breadcrumbs=”1″ pack=”material” size=”xlarge” subtitle_color=”#ffffff” ch_background_color=”#6c7cd1″ icon_material=”f32d” opacity=”1″ color=”#ffffff” padding_bottom=”125″ title_top_margin=”10″]
Styled Lists & Tables
[/gem_custom_header][/vc_column][/vc_row][vc_row][vc_column][gem_divider margin_top=”130″][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.[/vc_column_text][gem_divider margin_top=”40″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
STYLE 1: 4 columns + thin lines
[/vc_column_text][gem_divider margin_top=”40″][/vc_column][/vc_row][vc_row][vc_column][gem_table]
Column 1 |
Column 2 |
Column 3 |
Column 4 |
---|---|---|---|
Lorem ipsum dolor sit amet | Consectetur adipisicing | Lorem ipsum dolor sit amet | Consectetur adipisicing |
Consectetur adipisicing | Elit sed do eiusmod | Consectetur adipisicing | Elit sed do eiusmod |
Elit sed do eiusmod | Tempor incididunt labore * | Elit sed do eiusmod | Tempor incididunt ut labore |
Tempor incididunt ut labore | Et dolore magna aliqua | Tempor incididunt ut labore | Et dolore magna aliqua |
Et dolore magna aliqua | Ut enim ad minim | Et dolore magna aliqua | Ut enim ad minim |
Ut enim ad minim | Veniam, quis nostrud | Ut enim ad minim | Veniam, quis nostrud * |
Veniam, quis nostrud | Exercitation ullamco laboris | Veniam, quis nostrud | Exercitation ullamco laboris |
Exercitation ullamco laboris | Nisi ut aliquip ex ea | Exercitation ullamco laboris | Nisi ut aliquip ex ea |
[/gem_table][/vc_column][/vc_row][vc_row][vc_column][gem_divider margin_top=”70″][vc_column_text]
STYLE 2: 3 columns + thick line
[/vc_column_text][gem_divider margin_top=”40″][/vc_column][/vc_row][vc_row][vc_column][gem_table style=”2″]
Column 1 |
Column 2 |
Column 3 |
Status |
---|---|---|---|
Lorem ipsum dolor sit amet | Consectetur adipisicing | Lorem ipsum dolor sit amet | ![]() |
Consectetur adipisicing | Elit sed do eiusmod | Consectetur adipisicing | ![]() |
Elit sed do eiusmod | Tempor incididunt labore | Elit sed do eiusmod | ![]() |
Tempor incididunt ut labore | Et dolore magna aliqua | Tempor incididunt ut labore | ![]() |
Et dolore magna aliqua | Ut enim ad minim | Et dolore magna aliqua | ![]() |
Ut enim ad minim | Veniam, quis nostrud | Ut enim ad minim | ![]() |
Veniam, quis nostrud | Exercitation ullamco laboris | Veniam, quis nostrud | ![]() |
Exercitation ullamco laboris | Nisi ut aliquip ex ea | Exercitation ullamco laboris | ![]() |
[/gem_table][/vc_column][/vc_row][vc_row][vc_column][gem_divider margin_top=”70″][vc_column_text]
STYLE 3: 2 columns + flat
[/vc_column_text][gem_divider margin_top=”40″][/vc_column][/vc_row][vc_row][vc_column][gem_table style=”3″]
|
|
---|---|
Lorem ipsum dolor sit amet | Consectetur adipisicing |
Consectetur adipisicing | Elit sed do eiusmod |
Elit sed do eiusmod | Tempor incididunt labore |
Tempor incididunt ut labore | Et dolore magna aliqua |
Et dolore magna aliqua | Ut enim ad minim |
Ut enim ad minim | Veniam, quis nostrud |
Veniam, quis nostrud | Exercitation ullamco laboris |
Exercitation ullamco laboris | Nisi ut aliquip ex ea |
[/gem_table][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”110px”][gem_fullwidth background_color=”#46485c”][gem_divider margin_top=”-65″][gem_alert_box content_background_color=”” button_1_size=”large” button_1_corner=”40″ button_1_icon_pack=”material” button_2_activate=”1″ button_2_style=”outline” button_2_size=”large” button_2_corner=”40″ button_2_border=”4″ button_2_icon_pack=”material” centered=”1″ button_1_text=”Purchase now!” button_1_text_color=”#46485c” button_1_background_color=”#ffd740″ button_1_icon_material=”f23e” button_2_text=”more details” button_2_text_color=”#ffd740″ button_2_border_color=”#ffd740″ button_2_icon_material=”f491″][/gem_alert_box][gem_divider margin_top=”-15″][/gem_fullwidth][/vc_column][/vc_row][vc_row][vc_column][gem_divider margin_top=”110″][vc_column_text]
lists styles
[/vc_column_text][gem_divider margin_top=”50″][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.[/vc_column_text][gem_divider margin_top=”60″][/vc_column][/vc_row][vc_row][vc_column offset=”vc_col-lg-9 vc_col-md-8″][vc_column_text]
ordered list
[/vc_column_text][gem_divider margin_top=”50″][gem_textbox content_background_color=”” padding_top=”15″ padding_bottom=”25″ border_color=”#cccccc” border_width=”1″][gem_dropcap shape=”circle” letter=”1″ color=”#ffffff” background_color=”#9b4ce4″][gem_divider margin_top=”-43″][vc_column_text]
[/vc_column_text][/gem_textbox][gem_divider margin_top=”-25″][gem_textbox content_background_color=”” padding_top=”15″ padding_bottom=”25″ border_color=”#cccccc” border_width=”1″][gem_dropcap shape=”circle” letter=”2″ color=”#ffffff” background_color=”#4f67e1″][gem_divider margin_top=”-43″][vc_column_text]
[/vc_column_text][/gem_textbox][gem_divider margin_top=”-24″][gem_textbox content_background_color=”” padding_top=”15″ padding_bottom=”25″ border_color=”#cccccc” border_width=”1″][gem_dropcap shape=”circle” letter=”3″ color=”#ffffff” background_color=”#00bcd4″][gem_divider margin_top=”-43″][vc_column_text]
[/vc_column_text][/gem_textbox][/vc_column][vc_column offset=”vc_col-lg-3 vc_col-md-4″][vc_column_text]
[/vc_column_text][gem_divider margin_top=”50″][gem_textbox content_background_color=”” padding_top=”14″ padding_bottom=”0″ padding_right=”5″ border_color=”#cccccc” border_width=”1″][gem_dropcap shape=”circle” letter=”1″ color=”#9b4ce4″ border_color=”#9b4ce4″][vc_column_text css=”.vc_custom_1454506425612{margin-top: 7px !important;}”]Lorem ipsum dolor sit amet, consectetur [/vc_column_text][gem_divider margin_top=”20″][/gem_textbox][gem_divider margin_top=”-25″][gem_textbox content_background_color=”” padding_top=”14″ padding_bottom=”0″ padding_right=”5″ border_color=”#cccccc” border_width=”1″][gem_dropcap shape=”circle” letter=”2″ color=”#4f67e1″ border_color=”#4f67e1″][vc_column_text css=”.vc_custom_1454506594279{margin-top: 7px !important;}”]Consectetu elit sed adipisicing, eiusmod [/vc_column_text][gem_divider margin_top=”20″][/gem_textbox][gem_divider margin_top=”-24″][gem_textbox content_background_color=”” padding_top=”14″ padding_bottom=”0″ padding_right=”5″ border_color=”#cccccc” border_width=”1″][gem_dropcap shape=”circle” letter=”3″ color=”#00bcd4″ border_color=”#00bcd4″][vc_column_text css=”.vc_custom_1454506584103{margin-top: 7px !important;}”]Adipisicing elit, sed do eiusmod tempor[/vc_column_text][gem_divider margin_top=”20″][/gem_textbox][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”30px”][/vc_column][/vc_row][vc_row][vc_column offset=”vc_col-lg-9 vc_col-md-8″][gem_textbox content_background_color=”#42abd6″ padding_top=”15″ padding_bottom=”25″ border_width=”1″][gem_dropcap shape=”circle” letter=”1″ color=”#42abd6″ background_color=”#ffffff”][gem_divider margin_top=”-43″][vc_column_text]
[/vc_column_text][/gem_textbox][gem_divider margin_top=”-25″][gem_textbox content_background_color=”#7acdc5″ padding_top=”15″ padding_bottom=”25″ border_width=”1″][gem_dropcap shape=”circle” letter=”2″ color=”#7acdc5″ background_color=”#ffffff”][gem_divider margin_top=”-43″][vc_column_text]
[/vc_column_text][/gem_textbox][gem_divider margin_top=”-25″][gem_textbox content_background_color=”#aed581″ padding_top=”15″ padding_bottom=”25″ border_width=”1″][gem_dropcap shape=”circle” letter=”3″ color=”#aed581″ background_color=”#ffffff”][gem_divider margin_top=”-43″][vc_column_text]
[/vc_column_text][/gem_textbox][/vc_column][vc_column offset=”vc_col-lg-3 vc_col-md-4″][gem_textbox content_background_color=”#42abd6″ padding_top=”14″ padding_bottom=”0″ padding_right=”20″ border_width=”1″][gem_dropcap shape=”circle” letter=”1″ color=”#ffffff” border_color=”#ffffff”][vc_column_text css=”.vc_custom_1454508945169{margin-top: 7px !important;}”]Lorem ipsum dolor amet, consectetur [/vc_column_text][gem_divider margin_top=”20″][/gem_textbox][gem_divider margin_top=”-25″][gem_textbox content_background_color=”#7acdc5″ padding_top=”14″ padding_bottom=”0″ padding_right=”20″ border_width=”1″][gem_dropcap shape=”circle” letter=”2″ color=”#ffffff” border_color=”#ffffff”][vc_column_text css=”.vc_custom_1454506936955{margin-top: 7px !important;}”]Consectetu elit sed adipisicing, eiusmod [/vc_column_text][gem_divider margin_top=”20″][/gem_textbox][gem_divider margin_top=”-25″][gem_textbox content_background_color=”#aed581″ padding_top=”14″ padding_bottom=”0″ padding_right=”20″ border_width=”1″][gem_dropcap shape=”circle” letter=”3″ color=”#ffffff” border_color=”#ffffff”][vc_column_text css=”.vc_custom_1454507049052{margin-top: 7px !important;}”]Adipisicing elit, sed do eiusmod tempor[/vc_column_text][gem_divider margin_top=”20″][/gem_textbox][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”50px”][vc_column_text]
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][gem_list color=”1″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][vc_column width=”1/3″][gem_list type=”arrow” color=”1″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][vc_column width=”1/3″][gem_list type=”check-style-1″ color=”2″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][gem_list type=”disc-style-1″ color=”1″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][vc_column width=”1/3″][gem_list type=”snowflake-style-1″ color=”6″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][vc_column width=”1/3″][gem_list type=”cross” color=”10″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][gem_list type=”check-style-2″ color=”3″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][vc_column width=”1/3″][gem_list type=”square” color=”4″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][vc_column width=”1/3″][gem_list type=”star” color=”5″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][gem_list type=”checkbox” color=”8″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][vc_column width=”1/3″][gem_list type=”Label” color=”5″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][vc_column width=”1/3″][gem_list type=”check-style-1″ color=”2″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][gem_list type=”double-arrow” color=”2″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][vc_column width=”1/3″][gem_list type=”plus” color=”11″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][vc_column width=”1/3″][gem_list type=”disc-style-2″ color=”1″]
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Incididunt ut labore et dolore magna aliqua
- Enim ad minim veniam, quis nostrud exercitation
[/gem_list][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”120px”][gem_fullwidth container=”1″ background_color=”#494b58″][gem_textbox content_background_color=”” centered=”1″ padding_top=”350″ padding_bottom=”260″][gem_icon pack=”material” shape=”circle” size=”medium” icon_material=”f531″ color=”#acac67″ border_color=”#acac67″][vc_empty_space height=”55px”][vc_column_text]
[/vc_column_text][vc_empty_space height=”55px”][vc_column_text]
[/vc_column_text][/gem_textbox][/gem_fullwidth][/vc_column][/vc_row]