Styled Lists & Tables (Demo)

[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]
[gem_divider margin_top=»130″]

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.

[gem_divider margin_top=»40″]

STYLE 1: 4 columns + thin lines 

[gem_divider margin_top=»40″]
[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]
[gem_divider margin_top=»70″]

STYLE 2: 3 columns + thick line  

[gem_divider margin_top=»40″]
[gem_table style=»2″]
Column 1
Column 2
Column 3
Status
Lorem ipsum dolor sit amet Consectetur adipisicing Lorem ipsum dolor sit amet lists_page_icon_1
Consectetur adipisicing Elit sed do eiusmod Consectetur adipisicing lists_page_icon_2
Elit sed do eiusmod Tempor incididunt labore Elit sed do eiusmod lists_page_icon_3
Tempor incididunt ut labore Et dolore magna aliqua Tempor incididunt ut labore lists_page_icon_4
Et dolore magna aliqua Ut enim ad minim Et dolore magna aliqua lists_page_icon_5
Ut enim ad minim Veniam, quis nostrud Ut enim ad minim lists_page_icon_6
Veniam, quis nostrud Exercitation ullamco laboris Veniam, quis nostrud lists_page_icon_7
Exercitation ullamco laboris Nisi ut aliquip ex ea Exercitation ullamco laboris lists_page_icon_8
[/gem_table]
[gem_divider margin_top=»70″]

STYLE 3: 2 columns + flat  

[gem_divider margin_top=»40″]
[gem_table style=»3″]
lists_page_icon_9  Column 1
lists_page_icon_10  Column 2
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]
[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]
[gem_divider margin_top=»110″]

lists styles

[gem_divider margin_top=»50″]

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.

[gem_divider margin_top=»60″]

ordered list

[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″]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
[/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″]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
[/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″]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
[/gem_textbox]
sidebar list
[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″]

Lorem ipsum dolor sit amet, consectetur

[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″]

Consectetu elit sed adipisicing, eiusmod

[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″]

Adipisicing elit, sed do eiusmod tempor

[gem_divider margin_top=»20″][/gem_textbox]
[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″]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
[/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″]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
[/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″]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
[/gem_textbox]
[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»]

Lorem ipsum dolor amet, consectetur

[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»]

Consectetu elit sed adipisicing, eiusmod

[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»]

Adipisicing elit, sed do eiusmod tempor

[gem_divider margin_top=»20″][/gem_textbox]
LISTS WITH COLOR BULLETSt
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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″]
ad block
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
[/gem_textbox][/gem_fullwidth]