JHU SOE Component Library

Lists Card 

<!-- Lists Card -->
<div class="card card_lists card_type_default">
    <div class="card_inner card_lists_inner">
        <div class="card_lists_grid">
            <div class="card_lists_set">
                <div class="card_lists_set_header">
                    <h2 class="card_lists_set_title">Ultricies Magna Euismod</h2>
                </div>
                <div class="card_lists_set_body">
                    <ul class="card_lists_set_items">
                        <li class="card_lists_set_item">Sed posuere <a href="#">consectetur est</a> at lobortis.</li>
                        <li class="card_lists_set_item">Vivamus <strong>sagittis</strong> lacus vel augue laoreet rutrum <em>faucibus</em> dolor auctor.</li>
                        <li class="card_lists_set_item">Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li>
                    </ul>
                </div>
            </div>
            <div class="card_lists_set">
                <div class="card_lists_set_header">
                    <h2 class="card_lists_set_title">Euismod</h2>
                </div>
                <div class="card_lists_set_body">
                    <ul class="card_lists_set_items">
                        <li class="card_lists_set_item">Sed posuere consectetur</li>
                        <li class="card_lists_set_item">Vivamus sagittis lacus</li>
                        <li class="card_lists_set_item">Morbi leo risus</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Lists Card -->
 
{#
	{% include '@partial-lists-card' with {
		item: {
			type: 'default',
			items: [
				{
					lists: [
						{
							title: 'title',
							items: [
								'item'
							]
						}
					]
				}
			]
		}
	} %}
#}

<!-- Lists Card -->
<div class="card card_lists card_type_{{ item.type ?: 'default' }}">
	<div class="card_inner card_lists_inner">
		<div class="card_lists_grid">
			{% for list in item.lists %}
				<div class="card_lists_set">
					{% if list.title %}
						<div class="card_lists_set_header">
							{% if group_title %}
								<h3 class="card_lists_set_title">{{ list.title }}</h3>
							{% else %}
								<h2 class="card_lists_set_title">{{ list.title }}</h2>
							{% endif %}
						</div>
					{% endif %}
					<div class="card_lists_set_body">
						<ul class="card_lists_set_items">
							{% for item in list.items %}
								<li class="card_lists_set_item">{{ item }}</li>
							{% endfor %}
						</ul>
					</div>
				</div>
			{% endfor %}
		</div>
	</div>
</div>
<!-- END: Lists Card -->

No notes defined.