Le Moyne Component Library

Multi Column List 

<!-- Link Group -->
<div class="multi_column_list theme_">
    <div class="multi_column_list_header">
        <div class="fs-row">
            <div class="fs-cell fs-lg-8 fs-lg-justify-center">
                <div class="multi_column_list_header_inner">
                    <h2 class="multi_column_list_title">Ipsum Fermentum Tristique</h2>
                    <div class="multi_column_list_description">
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="multi_column_list_body">
        <div class="fs-row">
            <div class="fs-cell">
                <ul class="multi_column_list_list">
                    <li class="multi_column_list_item">

                        <a href="#" class="multi_column_list_link">
                            <span class="multi_column_list_link_inner">
                                <span class="multi_column_list_link_label">Standard Link With Title</span><span class="icon_nowrap multi_column_list_link_icon" aria-hidden="true">&#xfeff;
                                    <svg class="icon icon_caret_right">
                                        <use href="/images/icons.svg#caret_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="multi_column_list_item">
                        <span class="multi_column_list_text">
                            Sed eros lectus, scelerisque imperdiet fermentum vel, ultrices quis leo.
                        </span>

                    </li>
                    <li class="multi_column_list_item">
                        <span class="multi_column_list_text">
                            Sed eros lectus, scelerisque imperdiet fermentum vel, ultrices quis leo.
                        </span>

                    </li>
                    <li class="multi_column_list_item">

                        <a href="#" class="multi_column_list_link">
                            <span class="multi_column_list_link_inner">
                                <span class="multi_column_list_link_label">Standard Link With Title</span><span class="icon_nowrap multi_column_list_link_icon" aria-hidden="true">&#xfeff;
                                    <svg class="icon icon_caret_right">
                                        <use href="/images/icons.svg#caret_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="multi_column_list_item">

                        <a href="#" class="multi_column_list_link">
                            <span class="multi_column_list_link_inner">
                                <span class="multi_column_list_link_label">External Link With Title External Link With Title</span><span class="icon_nowrap multi_column_list_link_icon" aria-hidden="true">&#xfeff;
                                    <svg class="icon icon_external">
                                        <use href="/images/icons.svg#external" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="multi_column_list_item">

                        <a href="#" class="multi_column_list_link">
                            <span class="multi_column_list_link_inner">
                                <span class="multi_column_list_link_label">File Link With Title File Link With Title</span><span class="icon_nowrap multi_column_list_link_icon" aria-hidden="true">&#xfeff;
                                    <svg class="icon icon_file">
                                        <use href="/images/icons.svg#file" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="multi_column_list_item">

                        <a href="#" class="multi_column_list_link">
                            <span class="multi_column_list_link_inner">
                                <span class="multi_column_list_link_label">Ipsum Consectetur Pharetra Purus Quam Consectetur Pharetra</span><span class="icon_nowrap multi_column_list_link_icon" aria-hidden="true">&#xfeff;
                                    <svg class="icon icon_caret_right">
                                        <use href="/images/icons.svg#caret_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="multi_column_list_item">

                        <a href="#" class="multi_column_list_link">
                            <span class="multi_column_list_link_inner">
                                <span class="multi_column_list_link_label">Standard Link With Title</span><span class="icon_nowrap multi_column_list_link_icon" aria-hidden="true">&#xfeff;
                                    <svg class="icon icon_caret_right">
                                        <use href="/images/icons.svg#caret_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- END: Link Group -->
 
{#
	{% include '@component-mutli-column-list' with {
		title: 'Title',
		items: [
			{
				title: 'Item Title',
				url: '#',
				icon: 'caret_right'
			}
		]
	} %}
#}

<!-- Link Group -->
<div class="multi_column_list theme_{{theme}}">
	{% if title or description %}
		<div class="multi_column_list_header">
			<div class="fs-row">
				<div class="fs-cell fs-lg-8 fs-lg-justify-center">
					<div class="multi_column_list_header_inner">
						{% if title %}
							<h2 class="multi_column_list_title">{{ title }}</h2>
						{% endif %}
						{% if description %}
							<div class="multi_column_list_description">
								<p>{{ description }}</p>
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	{% endif %}
	<div class="multi_column_list_body">
		<div class="fs-row">
			<div class="fs-cell">
				<ul class="multi_column_list_list">
					{% for item in items %}
						<li class="multi_column_list_item">
							{% if item.type == 'link' %}
								{% set link = item.link %}
								{% include "@partial-link" with {
									class: 'multi_column_list',
									url: link.url,
									title: link.title,
									icon: link.icon|default('caret_right'),
									nowrap: true,
									new_window: link.target,
								} %}
							{% else %}
								<span class="multi_column_list_text">
									{{ item.text }}
								</span>
							{% endif %}

						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- END: Link Group -->

No notes defined.