{"id":119,"date":"2014-03-09T10:07:42","date_gmt":"2014-03-09T10:07:42","guid":{"rendered":"http:\/\/www.themegasm.net\/demos\/wordpress\/interstellar\/?page_id=119"},"modified":"2014-03-09T10:07:42","modified_gmt":"2014-03-09T10:07:42","slug":"components","status":"publish","type":"page","link":"https:\/\/pierre-beccu.fr\/test\/components\/","title":{"rendered":"Components"},"content":{"rendered":"[themegasm_masonry]\n[themegasm_masonry_item]\n[themegasm_box]\n

Typography<\/h2>\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][\/themegasm_hr]\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,\u00a0tempor sit amet,<\/strong>\u00a0ante.\u00a0Donec eu libero sit amet quam egestas semper<\/em>. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.<\/p>\n[themegasm_highlight colorize=’text’]This is a highlighted text [\/themegasm_highlight]\u00a0<\/strong>\u00a0tags morbi tristique senectus et netus et malesuada This is between\u00a0<\/i>tags. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. [themegasm_abbr title=’World Health Organization’]WHO[\/themegasm_abbr] eu libero sit amet quam egestas semper, [themegasm_highlight]this a highlighted text.[\/themegasm_highlight]\n

This is an H1 heading<\/h1>\n

This is an H2 heading<\/h2>\n

This is an H3 heading<\/h3>\n

This is an H4 heading<\/h4>\n

This is an H5 heading<\/h5>\n
This is an H6 heading<\/h6>\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’][\/themegasm_hr]\n

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.\u00a0Isaac Asimov<\/cite><\/p><\/blockquote>\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’][\/themegasm_hr]\n

HR Lines<\/h5>\n[themegasm_hr shape=’solid’ color=’#ccc’ margin=’40’][\/themegasm_hr]\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’][\/themegasm_hr]\n[themegasm_hr shape=’dotted’ color=’#ccc’ margin=’40’][\/themegasm_hr]\n[themegasm_hr shape=’solid’ thickness=’thick’ color=’#ccc’ margin=’40’][\/themegasm_hr]\n[themegasm_hr shape=’dashed’ thickness=’thick’\u00a0color=’#ccc’ margin=’40’][\/themegasm_hr]\n[themegasm_hr shape=’dotted’ thickness=’thick’\u00a0color=’#ccc’ margin=’40’][\/themegasm_hr]\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’][\/themegasm_hr]\n
Lists<\/h5>\n[themegasm_row]\n[themegasm_column columns=’6′]\n
Disc List<\/h6>\n[themegasm_list]\n
    \n
  • Lorem\u00a0ipsum dolor sit amet, consectetur adipiscing elit. Praesent id volutpat quam.<\/li>\n
  • Pellentesque vulputate eros nunc, eget lacinia nisl tempor consectetur.<\/li>\n
  • Morbi lobortis lacus sed ligula iaculis tristique.<\/li>\n<\/ul>\n[\/themegasm_list]\n[\/themegasm_column]\n[themegasm_column columns=’6′]\n
    Square List<\/h6>\n[themegasm_list style=’square’]\n
      \n
    • Lorem\u00a0ipsum dolor sit amet, consectetur adipiscing elit. Praesent id volutpat quam.<\/li>\n
    • Pellentesque vulputate eros nunc, eget lacinia nisl tempor consectetur.<\/li>\n
    • Morbi lobortis lacus sed ligula iaculis tristique.<\/li>\n<\/ul>\n[\/themegasm_list]\n[\/themegasm_column]\n[themegasm_column columns=’6′]\n
      Circle List<\/h6>\n[themegasm_list style=’circ’]\n
        \n
      • Lorem\u00a0ipsum dolor sit amet, consectetur adipiscing elit. Praesent id volutpat quam.<\/li>\n
      • Pellentesque vulputate eros nunc, eget lacinia nisl tempor consectetur.<\/li>\n
      • Morbi lobortis lacus sed ligula iaculis tristique.<\/li>\n<\/ul>\n[\/themegasm_list]\n[\/themegasm_column]\n[themegasm_column columns=’6′]\n
        Ordered List<\/h6>\n
          \n
        1. Lorem\u00a0ipsum dolor sit amet, consectetur adipiscing elit. Praesent id volutpat quam.<\/li>\n
        2. Pellentesque vulputate eros nunc, eget lacinia nisl tempor consectetur.<\/li>\n
        3. Morbi lobortis lacus sed ligula iaculis tristique.<\/li>\n<\/ol>\n[\/themegasm_column]\n[themegasm_column columns=’12’]\n
          Big Orderes List<\/h6>\n

           <\/p>\n[themegasm_list style=’big_ol’]\n

            \n
          1. Lorem\u00a0ipsum dolor sit amet, consectetur adipiscing elit. Praesent id volutpat quam.<\/li>\n
          2. Pellentesque vulputate eros nunc, eget lacinia nisl tempor consectetur.<\/li>\n
          3. Morbi lobortis lacus sed ligula iaculis tristique.<\/li>\n<\/ol>\n[\/themegasm_list]\n[\/themegasm_column]\n[\/themegasm_row]\n[\/themegasm_box]\n[\/themegasm_masonry_item]\n[themegasm_masonry_item]\n[themegasm_box]\n

            Buttons<\/h2>\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][\/themegasm_hr]\n[themegasm_button]Small Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button size=’medium’]medium\u00a0Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button size=’large’]large\u00a0Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button size=’large’ rounded=’true’]Rounded large\u00a0Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button size=’large’ full_width=’true’]Full width large\u00a0Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button style=’empty’]Small Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button \u00a0style=’empty’\u00a0size=’medium’]medium\u00a0Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button \u00a0style=’empty’\u00a0size=’large’]large\u00a0Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button \u00a0style=’empty’\u00a0size=’large’ rounded=’true’]Rounded large\u00a0Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button \u00a0style=’empty’\u00a0size=’large’ full_width=’true’]Full width large\u00a0Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button style=’embossed’]Small Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button \u00a0style=’embossed’\u00a0size=’medium’]medium\u00a0Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button \u00a0style=’embossed’\u00a0size=’large’]large\u00a0Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button \u00a0style=’embossed’\u00a0size=’large’ full_width=’true’]Full width large\u00a0Button[\/themegasm_button]\n

             <\/p>\n[themegasm_hr shape=’dotted’ color=’#ccc’ margin=’40’][\/themegasm_hr]\n

            Colors<\/h4>\n

            *All variations above are available with these colors<\/p>\n

             <\/p>\n[themegasm_button style=’embossed’ color=’pink’]Small Embossed Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button style=’embossed’ color=’blue’]Small Embossed Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button style=’embossed’ color=’green’]Small Embossed Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button style=’embossed’ color=’purple’]Small Embossed Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button style=’embossed’ color=’red’]Small Embossed Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button style=’embossed’ color=’white’]Small Embossed Button[\/themegasm_button]\n

             <\/p>\n[themegasm_button style=’embossed’ color=’black’]Small Embossed Button[\/themegasm_button]\n[\/themegasm_box]\n[\/themegasm_masonry_item]\n[themegasm_masonry_item]\n[themegasm_box]\n

            Boxes<\/h2>\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][\/themegasm_hr]\n[themegasm_alert type=’error’]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[\/themegasm_alert]\n[themegasm_alert type=’warning’]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[\/themegasm_alert]\n[themegasm_alert type=’success’]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[\/themegasm_alert]\n[themegasm_alert]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[\/themegasm_alert]\n[\/themegasm_box]\n[\/themegasm_masonry_item]\n[themegasm_masonry_item]\n[themegasm_box]\n

            Icons<\/h2>\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][\/themegasm_hr]\n

            Any shape, any size, any colors with just simple editing using HTML5 data-* attributes<\/p>\n

            Options Available:<\/h6>\n
              \n
            • Shape:\u00a0<\/strong>The shape of the icon background. (circle or square)<\/li>\n
            • Radius:<\/strong>\u00a0The radius of the circle or the dimensions of the square.<\/li>\n
            • Size:<\/strong>\u00a0Size of the icon itself.<\/li>\n
            • Duration:<\/strong>\u00a0The duration of the hover effect animation.<\/li>\n
            • Background:<\/strong>\u00a0The duration of the hover effect animation.<\/li>\n
            • Color:<\/strong>\u00a0The duration of the hover effect animation.<\/li>\n
            • Background Hover:<\/strong>\u00a0The duration of the hover effect animation.<\/li>\n
            • Color Hover:<\/strong>\u00a0The duration of the hover effect animation.<\/li>\n<\/ul>\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][\/themegasm_hr]\n
              Examples:<\/h6>\n

               <\/p>\n

               <\/p>\n[themegasm_row]\n[themegasm_column columns=’3′ always_padd=’true’ align=’center’]\n[themegasm_icon icon=’icon-heart-1′ background_shape=’circle’ background_radius=’41’ size=’30’ background_color=’#dd3333′ background_hover=’#ffffff’ icon_color=’#ffffff’ icon_hover=’#dd3333′][\/themegasm_icon][\/themegasm_column]\n[themegasm_column columns=’3′ always_padd=’true’ align=’center’]\n[themegasm_icon icon=’icon-glass’ background_shape=’circle’ size=’30’ background_color=’#81d742′ background_hover=’#2a8427′ icon_color=’#ffffff’][\/themegasm_icon]\n[\/themegasm_column]\n[themegasm_column columns=’3′ always_padd=’true’ align=’center’]\n[themegasm_icon icon=’icon-camera-1′ background_shape=’square’ size=’30’ background_color=’#424242′ background_hover=’#5dbdd3′ icon_color=’#ffffff’ icon_hover=’#ffffff’][\/themegasm_icon]\n[\/themegasm_column]\n[themegasm_column columns=’3′ always_padd=’true’ align=’center’]\n[themegasm_icon icon=’icon-location-1′ background_shape=’circle’\u00a0\u00a0background_radius=’20’ size=’20’ background_color=’#8224e3′ background_hover=’#e2e2e2′ icon_color=’#ffffff’ icon_hover=’#353535′][\/themegasm_icon]\n[\/themegasm_column]\n[\/themegasm_row]\n

               <\/p>\n[\/themegasm_box]\n[\/themegasm_masonry_item]\n[themegasm_masonry_item]\n[themegasm_box]\n

              Progress Bars<\/h2>\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][\/themegasm_hr]\n[themegasm_bar title=’Web Design’ progress=’100′ style=’big’ foreground_color=’rgb(184, 113, 155)’ background_color=’#ccc’ text_color=’#fff’][\/themegasm_bar]\n

               <\/p>\n[themegasm_bar title=’HTML\/CSS’ progress=’90’ foreground_color=’#89cfcf’ background_color=’#ccc’ text_color=’#fff’][\/themegasm_bar]\n

               <\/p>\n[themegasm_bar title=’Javascript’ progress=’80’ foreground_color=’rgb(104, 146, 165)’ background_color=’#ccc’ text_color=’#fff’][\/themegasm_bar]\n

               <\/p>\n[themegasm_bar title=’PHP’\u00a0progress=’40’\u00a0foreground_color=’#9acc86′ background_color=’#ccc’ text_color=’#fff’][\/themegasm_bar]\n

               <\/p>\n[themegasm_bar title=’Flash’ progress=’20’ foreground_color=’#353535′ background_color=’#ccc’ text_color=’#fff’][\/themegasm_bar]\n[themegasm_hr thickness=’thick’ color=’#ccc’][\/themegasm_hr]\n[themegasm_bar title=’Web Design’ progress=’100′ style=’small’ foreground_color=’rgb(184, 113, 155)’ background_color=’#ccc’ text_color=’#fff’][\/themegasm_bar]\n

               <\/p>\n[themegasm_bar title=’HTML\/CSS’ progress=’90’\u00a0style=’small’\u00a0foreground_color=’#89cfcf’ background_color=’#ccc’ text_color=’#fff’][\/themegasm_bar]\n

               <\/p>\n[themegasm_bar title=’Javascript’ progress=’80’ style=’small’\u00a0foreground_color=’rgb(104, 146, 165)’ background_color=’#ccc’ text_color=’#fff’][\/themegasm_bar]\n

               <\/p>\n[themegasm_bar title=’PHP’\u00a0progress=’40’\u00a0style=’small’\u00a0foreground_color=’#9acc86′ background_color=’#ccc’ text_color=’#fff’][\/themegasm_bar]\n

               <\/p>\n[themegasm_bar title=’Flash’ progress=’20’ style=’small’\u00a0foreground_color=’#353535′ background_color=’#ccc’ text_color=’#fff’][\/themegasm_bar]\n[\/themegasm_box]\n[\/themegasm_masonry_item]\n[themegasm_masonry_item]\n[themegasm_box]\n

              Animated Counters<\/h2>\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][\/themegasm_hr]\n[themegasm_row]\n[themegasm_column columns=’4′ always_padd=’true’]\n[themegasm_counter number=’170′]\n

              Burgers Swallowed<\/h5>\n[\/themegasm_counter]\n[\/themegasm_column]\n[themegasm_column columns=’4′ always_padd=’true’]\n[themegasm_counter number=’39’]\n
              Cokes Sipped<\/h5>\n[\/themegasm_counter]\n[\/themegasm_column]\n[themegasm_column columns=’4′ always_padd=’true’]\n[themegasm_counter number=’40’ prefix=’K’]\n
              Calories gained<\/h5>\n[\/themegasm_counter]\n[\/themegasm_column]\n[themegasm_column columns=’12’ always_padd=’true’]\n[themegasm_counter number=’70’ prefix=’%’ font_size=’72’]\n
              of us died<\/h5>\n[\/themegasm_counter]\n[\/themegasm_column]\n[\/themegasm_row]\n[\/themegasm_box]\n[\/themegasm_masonry_item]\n[themegasm_masonry_item]\n[themegasm_box]\n

              Tabs & Accordions<\/h2>\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][\/themegasm_hr]\n[themegasm_tabs]\n[themegasm_tab title=’Tab 1′]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed sagittis felis, sit amet tincidunt turpis. Aenean fermentum leo eget orci adipiscing, ac rhoncus sem accumsan.[\/themegasm_tab]\n[themegasm_tab title=’Tab 2′]Vestibulum porta dolor a venenatis faucibus. Vestibulum blandit lorem velit, et placerat risus consequat in.[\/themegasm_tab]\n[themegasm_tab title=’Tab 3′]uis eu velit ultrices, consectetur dolor sit amet, blandit nibh. Nunc sapien mi, lobortis ac orci quis, vulputate ullamcorper tortor. Ut tincidunt massa orci, et bibendum orci convallis in. Nullam sit amet elit eu lectus adipiscing scelerisque.[\/themegasm_tab]\n[\/themegasm_tabs]\n[themegasm_hr shape=’dotted’ color=’#ccc’][\/themegasm_hr]\n[themegasm_tabs type=’vertical’]\n[themegasm_tab title=’Tab 1′]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed sagittis felis, sit amet tincidunt turpis. Aenean fermentum leo eget orci adipiscing, ac rhoncus sem accumsan.[\/themegasm_tab]\n[themegasm_tab title=’Tab 2′]Vestibulum porta dolor a venenatis faucibus. Vestibulum blandit lorem velit, et placerat risus consequat in.[\/themegasm_tab]\n[themegasm_tab title=’Tab 3′]uis eu velit ultrices, consectetur dolor sit amet, blandit nibh. Nunc sapien mi, lobortis ac orci quis, vulputate ullamcorper tortor. Ut tincidunt massa orci, et bibendum orci convallis in. Nullam sit amet elit eu lectus adipiscing scelerisque.[\/themegasm_tab]\n[\/themegasm_tabs]\n[themegasm_hr shape=’dotted’ color=’#ccc’][\/themegasm_hr]\n[themegasm_tabs type=’accordion’]\n[themegasm_tab title=’Tab 1′]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed sagittis felis, sit amet tincidunt turpis. Aenean fermentum leo eget orci adipiscing, ac rhoncus sem accumsan.[\/themegasm_tab]\n[themegasm_tab title=’Tab 2′]Vestibulum porta dolor a venenatis faucibus. Vestibulum blandit lorem velit, et placerat risus consequat in.[\/themegasm_tab]\n[themegasm_tab title=’Tab 3′]uis eu velit ultrices, consectetur dolor sit amet, blandit nibh. Nunc sapien mi, lobortis ac orci quis, vulputate ullamcorper tortor. Ut tincidunt massa orci, et bibendum orci convallis in. Nullam sit amet elit eu lectus adipiscing scelerisque.[\/themegasm_tab]\n[\/themegasm_tabs]\n[\/themegasm_box]\n[\/themegasm_masonry_item]\n[themegasm_masonry_item]\n[themegasm_box]\n

              Sliders<\/h2>\n[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][\/themegasm_hr]\n[themegasm_slider pager=’true’]\n[themegasm_slide image=’http:\/\/pierre-beccu.fr\/test\/files\/2014\/03\/pf_11.jpg’ caption=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id cursus nulla, vel lacinia augue. Donec egestas viverra odio in imperdiet. Aliquam erat volutpat. Morbi volutpat tempor nibh, eu imperdiet nunc pretium sit amet’ caption_background=’rgba(#000,0.5)’ caption_color=’#fff’][\/themegasm_slide]\n[themegasm_slide image=’http:\/\/pierre-beccu.fr\/test\/files\/2014\/03\/pf_91.jpg’ caption=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at velit id leo posuere lacinia dapibus ut quam. Cras sit amet pulvinar odio, ac malesuada ligula.’ caption_background=’#dd3333′ caption_color=’rgb(255, 255, 255)’][\/themegasm_slide]\n[themegasm_slide image=’http:\/\/pierre-beccu.fr\/test\/files\/2014\/03\/pf_8.jpg’ caption=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id cursus nulla, vel lacinia augue. Donec egestas viverra odio in imperdiet’ caption_background=’rgba(#000,0.5)’ caption_color=’#fff’][\/themegasm_slide]\n[themegasm_slide image=’http:\/\/pierre-beccu.fr\/test\/files\/2014\/03\/pf_14.jpg’ caption=’Donec egestas viverra odio in imperdiet. Aliquam erat volutpat. Morbi volutpat tempor nibh, eu imperdiet nunc pretium sit amet’ caption_background=’rgba(#000,0.5)’ caption_color=’#fff’][\/themegasm_slide]\n[\/themegasm_slider]\n

               <\/p>\n[themegasm_slider \u00a0mode=’vertical’]\n[themegasm_slide image=’http:\/\/pierre-beccu.fr\/test\/files\/2014\/03\/pf_11.jpg’ caption=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id cursus nulla, vel lacinia augue. Donec egestas viverra odio in imperdiet. Aliquam erat volutpat. Morbi volutpat tempor nibh, eu imperdiet nunc pretium sit amet’ caption_background=’rgba(#000,0.5)’ caption_color=’#fff’][\/themegasm_slide]\n[themegasm_slide image=’http:\/\/pierre-beccu.fr\/test\/files\/2014\/03\/pf_91.jpg’ caption=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at velit id leo posuere lacinia dapibus ut quam. Cras sit amet pulvinar odio, ac malesuada ligula.’ caption_background=’#dd3333′ caption_color=’rgb(255, 255, 255)’][\/themegasm_slide]\n[themegasm_slide image=’http:\/\/pierre-beccu.fr\/test\/files\/2014\/03\/pf_8.jpg’ caption=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id cursus nulla, vel lacinia augue. Donec egestas viverra odio in imperdiet’ caption_background=’rgba(#000,0.5)’ caption_color=’#fff’][\/themegasm_slide]\n[themegasm_slide image=’http:\/\/pierre-beccu.fr\/test\/files\/2014\/03\/pf_14.jpg’ caption=’Donec egestas viverra odio in imperdiet. Aliquam erat volutpat. Morbi volutpat tempor nibh, eu imperdiet nunc pretium sit amet’ caption_background=’rgba(#000,0.5)’ caption_color=’#fff’][\/themegasm_slide]\n[\/themegasm_slider]\n[\/themegasm_box]\n[\/themegasm_masonry_item]\n[\/themegasm_masonry]\n