<h2 class="mb-3">
Basic example
</h2>
<ul class="list-group">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul> <br />
<hr />
<h2 class="mb-3">
Active items
</h2>
<ul class="list-group">
<li class="list-group-item active">
Cras justo odio
</li>
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul> <br />
<hr />
<h2 class="mb-3">
Disabled items
</h2>
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">
Cras justo odio
</li>
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul> <br />
<hr />
<h2 class="mb-3">
Links and Buttons
</h2>
<ul class="list-group"><a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a><a href="#" class="list-group-item list-group-item-action">
Dapibus ac facilisis in
</a><a href="#" class="list-group-item list-group-item-action">
Morbi leo risus
</a><a href="#" class="list-group-item list-group-item-action">
Porta ac consectetur ac
</a><a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">
Vestibulum at eros
</a></ul> <br />
<hr />
<h2 class="mb-3">
Flush
</h2>
<ul class="list-group list-group-flush">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul> <br />
<hr />
<h2 class="mb-3">
Horizontal
</h2>
<ul class="list-group list-group-horizontal">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul> <br />
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul> <br />
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul> <br />
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul> <br />
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul> <br />
<hr />
<h2 class="mb-3">
Contextual classes
</h2>
<ul class="list-group">
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item list-group-item-primary">
A simple primary list group item
</li>
<li class="list-group-item list-group-item-secondary">
A simple secondary list group item
</li>
<li class="list-group-item list-group-item-success">
A simple success list group item
</li>
<li class="list-group-item list-group-item-danger">
A simple danger list group item
</li>
<li class="list-group-item list-group-item-warning">
A simple warning list group item
</li>
<li class="list-group-item list-group-item-info">
A simple info list group item
</li>
<li class="list-group-item list-group-item-light">
A simple light list group item
</li>
<li class="list-group-item list-group-item-dark">
A simple dark list group item
</li>
</ul> <br />
<ul class="list-group"><a href="#" class="list-group-item list-group-item-action">
Dapibus ac facilisis in
</a><a href="#" class="list-group-item list-group-item-action list-group-item-primary">
A simple primary list group item
</a><a href="#" class="list-group-item list-group-item-action list-group-item-secondary">
A simple secondary list group item
</a><a href="#" class="list-group-item list-group-item-action list-group-item-success">
A simple success list group item
</a><a href="#" class="list-group-item list-group-item-action list-group-item-danger">
A simple danger list group item
</a><a href="#" class="list-group-item list-group-item-action list-group-item-warning">
A simple warning list group item
</a><a href="#" class="list-group-item list-group-item-action list-group-item-info">
A simple info list group item
</a><a href="#" class="list-group-item list-group-item-action list-group-item-light">
A simple light list group item
</a><a href="#" class="list-group-item list-group-item-action list-group-item-dark">
A simple dark list group item
</a></ul> <br />
<hr />
{% block main %}
{% for section in sections %}
{% if section %}
{% if section.title %}
<h2 class="mb-3">
{{ section.title }}
</h2>
{% endif %}
{% for variant in section.variants %}
{% include '@atom-list-group' with variant %}
<br />
{% endfor %}
{% endif %}
<hr />
{% endfor %}
{% endblock %}
{
"sections": [
{
"title": "Basic example",
"variants": [
{
"items": [
{
"content": "Cras justo odio"
},
{
"content": "Dapibus ac facilisis in"
},
{
"content": "Morbi leo risus"
},
{
"content": "Porta ac consectetur ac"
},
{
"content": "Vestibulum at eros"
}
]
}
]
},
{
"title": "Active items",
"variants": [
{
"items": [
{
"content": "Cras justo odio",
"active": true
},
{
"content": "Dapibus ac facilisis in"
},
{
"content": "Morbi leo risus"
},
{
"content": "Porta ac consectetur ac"
},
{
"content": "Vestibulum at eros"
}
]
}
]
},
{
"title": "Disabled items",
"variants": [
{
"items": [
{
"content": "Cras justo odio",
"disabled": true
},
{
"content": "Dapibus ac facilisis in"
},
{
"content": "Morbi leo risus"
},
{
"content": "Porta ac consectetur ac"
},
{
"content": "Vestibulum at eros"
}
]
}
]
},
{
"title": "Links and Buttons",
"variants": [
{
"items": [
{
"content": "Cras justo odio",
"link": "#",
"active": true
},
{
"content": "Dapibus ac facilisis in",
"link": "#"
},
{
"content": "Morbi leo risus",
"link": "#"
},
{
"content": "Porta ac consectetur ac",
"link": "#"
},
{
"content": "Vestibulum at eros",
"link": "#",
"disabled": true
}
]
}
]
},
{
"title": "Flush",
"variants": [
{
"flush": true,
"items": [
{
"content": "Cras justo odio"
},
{
"content": "Dapibus ac facilisis in"
},
{
"content": "Morbi leo risus"
},
{
"content": "Porta ac consectetur ac"
},
{
"content": "Vestibulum at eros"
}
]
}
]
},
{
"title": "Horizontal",
"variants": [
{
"horizontal": "horizontal",
"items": [
{
"content": "Cras justo odio"
},
{
"content": "Dapibus ac facilisis in"
},
{
"content": "Morbi leo risus"
},
{
"content": "Porta ac consectetur ac"
},
{
"content": "Vestibulum at eros"
}
]
},
{
"horizontal": "horizontal-sm",
"items": [
{
"content": "Cras justo odio"
},
{
"content": "Dapibus ac facilisis in"
},
{
"content": "Morbi leo risus"
},
{
"content": "Porta ac consectetur ac"
},
{
"content": "Vestibulum at eros"
}
]
},
{
"horizontal": "horizontal-md",
"items": [
{
"content": "Cras justo odio"
},
{
"content": "Dapibus ac facilisis in"
},
{
"content": "Morbi leo risus"
},
{
"content": "Porta ac consectetur ac"
},
{
"content": "Vestibulum at eros"
}
]
},
{
"horizontal": "horizontal-lg",
"items": [
{
"content": "Cras justo odio"
},
{
"content": "Dapibus ac facilisis in"
},
{
"content": "Morbi leo risus"
},
{
"content": "Porta ac consectetur ac"
},
{
"content": "Vestibulum at eros"
}
]
},
{
"horizontal": "horizontal-xl",
"items": [
{
"content": "Cras justo odio"
},
{
"content": "Dapibus ac facilisis in"
},
{
"content": "Morbi leo risus"
},
{
"content": "Porta ac consectetur ac"
},
{
"content": "Vestibulum at eros"
}
]
}
]
},
{
"title": "Contextual classes",
"variants": [
{
"items": [
{
"content": "Dapibus ac facilisis in"
},
{
"content": "A simple primary list group item",
"style": "primary"
},
{
"content": "A simple secondary list group item",
"style": "secondary"
},
{
"content": "A simple success list group item",
"style": "success"
},
{
"content": "A simple danger list group item",
"style": "danger"
},
{
"content": "A simple warning list group item",
"style": "warning"
},
{
"content": "A simple info list group item",
"style": "info"
},
{
"content": "A simple light list group item",
"style": "light"
},
{
"content": "A simple dark list group item",
"style": "dark"
}
]
},
{
"items": [
{
"content": "Dapibus ac facilisis in",
"link": "#"
},
{
"content": "A simple primary list group item",
"link": "#",
"style": "primary"
},
{
"content": "A simple secondary list group item",
"link": "#",
"style": "secondary"
},
{
"content": "A simple success list group item",
"link": "#",
"style": "success"
},
{
"content": "A simple danger list group item",
"link": "#",
"style": "danger"
},
{
"content": "A simple warning list group item",
"link": "#",
"style": "warning"
},
{
"content": "A simple info list group item",
"link": "#",
"style": "info"
},
{
"content": "A simple light list group item",
"link": "#",
"style": "light"
},
{
"content": "A simple dark list group item",
"link": "#",
"style": "dark"
}
]
}
]
}
]
}
No notes defined.