{"id":354,"date":"2015-03-25T23:10:35","date_gmt":"2015-03-25T23:10:35","guid":{"rendered":"http:\/\/razonartificial.com\/themes\/reason-wp\/?page_id=354"},"modified":"2015-03-25T23:10:35","modified_gmt":"2015-03-25T23:10:35","slug":"lists","status":"publish","type":"page","link":"https:\/\/test.innovative8.uk.com\/wp3\/lists\/","title":{"rendered":"Lists"},"content":{"rendered":"<section class=\"css-section\">\n<h2 class=\"section-title no-margin-top\">List group<\/h2>\n<div class=\"row\">\n<div class=\"col-md-6\">\n<h3 class=\"no-margin-top\">Basic list group<\/h3>\n<p>Basic list with borders, you can use <a href=\"#\">flags and badges<\/a> on the right.<\/p>\n<p>To use just add a span badges with <code>badge badge-primary<\/code> class element. Replaced <code>primary<\/code> by <code>success<\/code>, <code>info<\/code>, <code>warning<\/code>, <code>danger<\/code> or <code>royal<\/code>, depending on the color you want.<\/p>\n<\/p><\/div>\n<div class=\"col-md-6\">\n<ul class=\"list-group\">\n<li class=\"list-group-item\">Cras justo odio<\/li>\n<li class=\"list-group-item\"><span class=\"label label-royal pull-right\">New<\/span> Dapibus ac facilisis in<\/li>\n<li class=\"list-group-item\">Morbi leo risus<\/li>\n<li class=\"list-group-item\"><span class=\"badge badge-primary\">98<\/span> Porta ac consectetur ac<\/li>\n<li class=\"list-group-item\">Vestibulum at eros<\/li>\n<\/ul><\/div>\n<div class=\"col-md-12\">\n<div class=\"panel panel-default\">\n<div class=\"panel-heading panel-heading-link\">\n                                <a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse1\" class=\"collapsed\"><i class=\"fa fa-terminal\"><\/i> Show Code<\/a>\n                            <\/div>\n<div id=\"collapse1\" class=\"panel-collapse collapse\">\n<div class=\"panel-body panel-body-no-padding\">\n                                    [xml]<br \/>\n&lt;ul class=&quot;list-group&quot;&gt;<br \/>\n&lt;li class=&quot;list-group-item&quot;&gt;&#8230;&lt;\/li&gt;<br \/>\n&lt;li class=&quot;list-group-item&quot;&gt;&lt;span class=&quot;label label-royal pull-right&quot;&gt;New&lt;\/span&gt; &#8230;&lt;\/li&gt;<br \/>\n&lt;li class=&quot;list-group-item&quot;&gt;&#8230;&lt;\/li&gt;<br \/>\n&lt;li class=&quot;list-group-item&quot;&gt;&lt;span class=&quot;badge badge-primary&quot;&gt;98&lt;\/span&gt; &#8230;&lt;\/li&gt;<br \/>\n&lt;li class=&quot;list-group-item&quot;&gt;&#8230;&lt;\/li&gt;<br \/>\n&lt;\/ul&gt;<br \/>\n                                    [\/xml]\n                                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- panel show code -->\n                    <\/div>\n<\/p><\/div>\n<hr class=\"dotted\">\n<div class=\"row\">\n<div class=\"col-md-6 col-md-push-6\">\n<h3 class=\"no-margin-top\">Striped list group<\/h3>\n<p>You can add class to the <code>striped<\/code> shading in columns of links. <\/p>\n<p class=\"alert alert-warning\">This only works with lists of items, not linked lists.<\/p>\n<\/p><\/div>\n<div class=\"col-md-6 col-md-pull-6\">\n<ul class=\"list-group list-group-striped\">\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary badge-round\">14<\/span><br \/>\n                            Cras justo odio\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary badge-square\">778<\/span><br \/>\n                            Cras justo odio\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge\">9<\/span><br \/>\n                            Dapibus ac facilisis in\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary\">98<\/span><br \/>\n                            Cras justo odio\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary badge-round\">17<\/span><br \/>\n                            Vestibulum at eros\n                          <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<hr class=\"dotted\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<h3>Link lists<\/h3>\n<p>The link lists are created with a <code>div<\/code> element of class <code>list-group<\/code> composed of elements <code>a<\/code> of the class <code>list-group-item<\/code>.<\/p>\n<p>You can also use badges and flags. as in Item Lists.<\/p>\n<\/p><\/div>\n<div class=\"col-md-6\">\n<div class=\"list-group\">\n                          <a href=\"#\" class=\"list-group-item active\"><br \/>\n                            Cras justo odio<br \/>\n                          <\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\">Dapibus ac facilisis in<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\">Morbi leo risus<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\">Porta ac consectetur ac<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\">Vestibulum at eros<\/a>\n                        <\/div>\n<\/p><\/div>\n<div class=\"col-md-6\">\n<div class=\"list-group\">\n                          <a href=\"#\" class=\"list-group-item\"><br \/>\n                            <span class=\"badge badge-round\">9<\/span><br \/>\n                            Cras justo odio<br \/>\n                          <\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\"><span class=\"badge\">9<\/span> Dapibus ac facilisis in<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\"><span class=\"badge\">19<\/span> Morbi leo risus<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item active\"><span class=\"badge badge-round\">999<\/span> Porta ac consectetur ac<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\">Vestibulum at eros<\/a>\n                        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<hr class=\"dotted\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<h3>Colorful elements<\/h3>\n<p>You can use the class <code>list-item-group-success<\/code> or <code>-info<\/code>, <code>-warning<\/code>, <code>-danger<\/code>, <code>-royal<\/code> for coloring and highlighting elements of a list.<\/p>\n<\/p><\/div>\n<div class=\"col-md-6\">\n<ul class=\"list-group\">\n<li class=\"list-group-item list-group-item-success\">Dapibus ac facilisis in<\/li>\n<li class=\"list-group-item list-group-item-info\">Cras sit amet nibh libero<\/li>\n<li class=\"list-group-item list-group-item-warning\">Porta ac consectetur ac<\/li>\n<li class=\"list-group-item list-group-item-danger\">Vestibulum at eros<\/li>\n<li class=\"list-group-item list-group-item-royal\">Dapibus ac facilisis in<\/li>\n<\/ul><\/div>\n<div class=\"col-md-6\">\n<div class=\"list-group\">\n                          <a href=\"#\" class=\"list-group-item list-group-item-success\">Dapibus ac facilisis in<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item list-group-item-info\">Cras sit amet nibh libero<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item list-group-item-warning\">Porta ac consectetur ac<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item list-group-item-danger\">Vestibulum at eros<\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item list-group-item-royal\">Dapibus ac facilisis in<\/a>\n                        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"row\">\n<div class=\"col-md-12\">\n<h3>compressed lists<\/h3>\n<p>You can use the <code>list-group-sm<\/code> class to make more compact lists.<\/p>\n<\/p><\/div>\n<div class=\"col-md-6\">\n<ul class=\"list-group list-group-sm\">\n<li class=\"list-group-item\">Cras justo odio<\/li>\n<li class=\"list-group-item\">Dapibus ac facilisis in<\/li>\n<li class=\"list-group-item\">Morbi leo risus<\/li>\n<li class=\"list-group-item\">Porta ac consectetur ac<\/li>\n<li class=\"list-group-item\">Vestibulum at eros<\/li>\n<\/ul><\/div>\n<div class=\"col-md-6\">\n<ul class=\"list-group list-group-striped list-group-sm\">\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary badge-round\">14<\/span><br \/>\n                            Cras justo odio\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary badge-square\">778<\/span><br \/>\n                            Cras justo odio\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge\">9<\/span><br \/>\n                            Dapibus ac facilisis in\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary\">98<\/span><br \/>\n                            Cras justo odio\n                          <\/li>\n<li class=\"list-group-item\">\n                            <span class=\"badge badge-primary badge-round\">17<\/span><br \/>\n                            Vestibulum at eros\n                          <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<hr class=\"dotted\">\n<div class=\"row\">\n<div class=\"col-md-6\">\n<h3>Content lists<\/h3>\n<p>You can also can add content such as headers and paragraphs to lists of links.<\/p>\n<p>Use the class <code>active<\/code> to highlight the currently active element.<\/p>\n<\/p><\/div>\n<div class=\"col-md-6\">\n<div class=\"list-group\">\n                          <a href=\"#\" class=\"list-group-item active\"><\/p>\n<h4 class=\"list-group-item-heading\">List group item heading<\/h4>\n<p class=\"list-group-item-text\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, vitae.!<\/p>\n<p>                          <\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\"><\/p>\n<h4 class=\"list-group-item-heading\">List group item heading<\/h4>\n<p class=\"list-group-item-text\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, facilis.!<\/p>\n<p>                          <\/a><br \/>\n                          <a href=\"#\" class=\"list-group-item\"><\/p>\n<h4 class=\"list-group-item-heading\">List group item heading<\/h4>\n<p class=\"list-group-item-text\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, nobis?!<\/p>\n<p>                          <\/a>\n                        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section class=\"css-section\">\n<h2 class=\"section-title\">Media Objects<\/h2>\n<div class=\"row\">\n<div class=\"col-md-5\">\n<h3 class=\"no-margin-top\">Basic Media list<\/h3>\n<p>Use the <code>media<\/code> class to display multimedia content with a description beside her. They can be images, videos or other multimedia objects. <\/p>\n<p>Use the <code>media-object<\/code> classes and <code>media-heading<\/code> for the media item and the item title respectively.<\/p>\n<\/p><\/div>\n<div class=\"col-md-7\">\n<div class=\"media\">\n                          <a class=\"pull-left\" href=\"#\"><br \/>\n                            <img decoding=\"async\" class=\"media-object\" src=\"..\/assets\/js\/holder.js\/70x70\/social\" alt=\"...\"><br \/>\n                          <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Media heading<\/h4>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolor vitae praesentium consectetur molestias.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"media\">\n                          <a class=\"pull-left\" href=\"#\"><br \/>\n                            <img decoding=\"async\" class=\"media-object\" src=\"..\/assets\/js\/holder.js\/70x70\/social\" alt=\"...\"><br \/>\n                          <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Media heading<\/h4>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolor vitae praesentium consectetur molestias.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"media\">\n                          <a class=\"pull-left\" href=\"#\"><br \/>\n                            <img decoding=\"async\" class=\"media-object\" src=\"..\/assets\/js\/holder.js\/70x70\/social\" alt=\"...\"><br \/>\n                          <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Media heading<\/h4>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolor vitae praesentium consectetur molestias.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<hr class=\"dotted\">\n<div class=\"col-md-12\">\n<h3>Media Lists<\/h3>\n<p>You can use chained lists. Perfect for systems and interests.<\/p>\n<\/p><\/div>\n<div class=\"col-md-12\">\n<ul class=\"media-list\">\n<li class=\"media\">\n                            <a class=\"pull-left\" href=\"#\"><br \/>\n                              <img class=\"media-object\" data-src=\"..\/assets\/js\/holder.js\/64x64\/social\" alt=\"Generic placeholder image\"><br \/>\n                            <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Media heading<\/h4>\n<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.<\/p>\n<p>                              <!-- Nested media object --><\/p>\n<div class=\"media\">\n                                <a class=\"pull-left\" href=\"#\"><br \/>\n                                  <img class=\"media-object\" data-src=\"..\/assets\/js\/holder.js\/64x64\/sky\" alt=\"Generic placeholder image\"><br \/>\n                                <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Nested media heading<\/h4>\n<p>                                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.<br \/>\n                                  <!-- Nested media object --><\/p>\n<div class=\"media\">\n                                    <a class=\"pull-left\" href=\"#\"><br \/>\n                                      <img class=\"media-object\" data-src=\"..\/assets\/js\/holder.js\/64x64\/social\" alt=\"Generic placeholder image\"><br \/>\n                                    <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Nested media heading<\/h4>\n<p>                                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.\n                                    <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>                              <!-- Nested media object --><\/p>\n<div class=\"media\">\n                                <a class=\"pull-left\" href=\"#\"><br \/>\n                                  <img class=\"media-object\" data-src=\"..\/assets\/js\/holder.js\/64x64\/vine\" alt=\"Generic placeholder image\"><br \/>\n                                <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Nested media heading<\/h4>\n<p>                                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.\n                                <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/li>\n<li class=\"media\">\n                            <a class=\"pull-right\" href=\"#\"><br \/>\n                              <img class=\"media-object\" data-src=\"..\/assets\/js\/holder.js\/64x64\/lava\" alt=\"Generic placeholder image\"><br \/>\n                            <\/a><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Media heading<\/h4>\n<p>                              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.\n                            <\/p><\/div>\n<\/li>\n<\/ul><\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>List group Basic list group Basic list with borders, you can use flags and badges on the right. To use just add a span badges with badge badge-primary class element. Replaced primary by success, info, warning, danger or royal, depending on the color you want. Cras justo odio New Dapibus ac facilisis in Morbi leo risus 98 Porta ac consectetur ac Vestibulum at eros Show Code [xml] &lt;ul class=&quot;list-group&quot;&gt; &lt;li class=&quot;list-group-item&quot;&gt;&#8230;&lt;\/li&gt; &lt;li class=&quot;list-group-item&quot;&gt;&lt;span class=&quot;label label-royal pull-right&quot;&gt;New&lt;\/span&gt; &#8230;&lt;\/li&gt; &lt;li class=&quot;list-group-item&quot;&gt;&#8230;&lt;\/li&gt; &lt;li class=&quot;list-group-item&quot;&gt;&lt;span class=&quot;badge badge-primary&quot;&gt;98&lt;\/span&gt; &#8230;&lt;\/li&gt; &lt;li class=&quot;list-group-item&quot;&gt;&#8230;&lt;\/li&gt; &lt;\/ul&gt; [\/xml] Striped list group You can add class to the striped shading in columns of links. This only works with lists of items, not linked lists. 14 Cras justo odio 778 Cras justo odio 9 Dapibus ac facilisis in 98 Cras justo odio 17 Vestibulum at eros Link lists The link lists are created with a div element of class list-group composed of elements a of the class list-group-item. You can also use badges and flags. as in Item Lists. Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 9 Cras justo odio 9 Dapibus ac facilisis in 19 Morbi leo risus 999 Porta ac consectetur ac Vestibulum at eros Colorful elements You can use the class list-item-group-success or -info, -warning, -danger, -royal for coloring and highlighting elements of a list. Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros Dapibus ac facilisis in Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros Dapibus ac facilisis in compressed lists You can use the list-group-sm class to make more compact lists. Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 14 Cras justo odio 778 Cras justo odio 9 Dapibus ac facilisis in 98 Cras justo odio 17 Vestibulum at eros Content lists You can also can add content such as headers and paragraphs to lists of links. Use the class active to highlight the currently active element. List group item heading Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, vitae.! List group item heading Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, facilis.! List group item heading Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, nobis?! Media Objects Basic Media list Use the media class to display multimedia content with a description beside her. They can be images, videos or other multimedia objects. Use the media-object classes and media-heading for the media item and the item title respectively. Media heading Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolor vitae praesentium consectetur molestias. Media heading Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolor vitae praesentium consectetur molestias. Media heading Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolor vitae praesentium consectetur molestias. Media Lists You can use chained lists. Perfect for systems and interests. Media heading Cras sit amet nibh libero, in gravida nulla. Nulla vel [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"page-left-menu.php","meta":{"footnotes":""},"class_list":["post-354","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages\/354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/comments?post=354"}],"version-history":[{"count":0,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages\/354\/revisions"}],"wp:attachment":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/media?parent=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}