Create a Directory Search Page

The directory page with search will filter data for any keyword in the profile card (names, departments, titles, etc.). Our recommended card layout is provided when you create a page using this template but you can choose to include additional content or remove the content that is provided.

On this page:

👁️‍🗨️  Profile Card Code Snippet Overview

Each card is comprised of the following code sections:

1. The Parent Div Wrapper - This the parent element. All the text inside this wrapper is searchable. The Parent Wrapper contains the Card Div wrapper.

   1. Required Class: box

   2. Optional Class: transistion-3d-hover

2. The List Item - Contains the main card elements. From the code view you can quickly identify this section by the code comment: <!--List Item--> The List Item contains the Media Div wrapper. The Media Div wrapper is a child of the Card Div wrapper.

3. The Avatar Image - This is the photo element for the card. To remove the image select entire the Avatar Div depicted in the HTML Code to delete.

4. The Profile Details - These are the main details for the profile card. There are two columns of content inside the Media Body Div. The profile details are in the first column.

5. The Social Media Buttons - These are optional social media icons. From the code view you can quickly identify this section by the code comment: <!--Social Network--> The social media icons are in the second column of the Media Body Div.

   1. To remove all social media links, select all of the code between the code comments to delete.

   2. Social media links use the Font Awesome library.

   3. To link to a social media profile include the full URL in place of the # in the link tag <a href="#">

6. The Card Footer - This is the second element in the Card Div wrapper and contains all of the contact and location details for the profile. Each detail in this element is listed by a list item.

   1. To remove a contact or location detail section select the entire section of code <li class="list-inline-item">...</li> to delete.

   2. To add a contact or location detail, add a new list item. <li class="list-inline-item">add new detail</li>
      

\uD83D\uDCD8 Instructions

Editing Profile Cards

1. When adding a Directory Search page, the content for the sample profile cards are provided in the second row. Click on the Column Content.
   

   

2. If you are satisfied with the content provided in the card, you can use the WYSIWYG editor to change the content in the sample cards.

Using the Code View to Edit Profile Cards

1. If you would like to remove content from the card or edit the card using the code view, click on the Source Code <> icon.

2. In the Source code editor, click on the Format Code icon and then Toggle Fullscreen Mode icon to expand the window size.

   

3. Locate the section of the card you would like edit using the code comment notations.

4. If you are removing a section of a card, make sure to remove the entire HTML element.
   

Creating New Profile Cards

1. Copy the Code Snippet below to add a card to the list.

2. Edit the sample content.

<div class="box transition-3d-hover">
		<!-- Team -->
		<div class="card shadow-none">
			<!-- List Item -->
			<div class="media">
				<div class="avatar avatar-xxl avatar-circle mb-4 mr-4">
					<img alt="Image Description" class="avatar-img" src="https://themetest-d.nmsu.edu/assets/img/100x100/img1.jpg" />
				</div>
				<div class="media-body">
					<div class="row align-items-center">
						<div class="col-sm mb-1 mb-sm-0">
							<span class="d-block small font-weight-bold text-cap mb-1">Program Director of Innovation</span>
							<h4 class="text-lh-sm text-primary">Christina Kray</h4>
							<p class="mb-0">Aerospace Engineering</p>
						</div>
						<div class="col-sm-auto">
							<!-- Social Networks -->
							<a class="btn btn-xs btn-icon btn-soft-secondary rounded-lg shadow-none mb-2" href="#">
								<i class="fab fa-twitter"></i>
							</a>
							<br />
							<a class="btn btn-xs btn-icon btn-soft-secondary rounded-lg shadow-none mb-2" href="#">
								<i class="fab fa-linkedin-in"></i>
							</a>
							<br />
							<a class="btn btn-xs btn-icon btn-soft-secondary rounded-lg shadow-none mb-2" href="#">
								<i class="fas fa-link"></i>
							</a>
							<br />
							<!-- End Social Networks -->
						</div>
					</div>
				</div>
			</div>
			<!-- End List Item -->
			<div class="card-footer text-right pb-0">
				<ul class="list-inline list-separator small text-body">
					<li class="list-inline-item">
						<a href="#">email@nmsu.edu</a>
					</li>
					<li class="list-inline-item">575-123-4567</li>
					<li class="list-inline-item">Building Name</li>
					<li class="list-inline-item">Room 100</li>
				</ul>
			</div>
		</div>
		<!-- End Team -->
	</div>

\uD83D\uDCCB Related articles

• Page:
  Custom Top Navigation (Cascade CMS KB)
• Page:
  Create a Directory Sort Page (Cascade CMS KB)
• Page:
  Create a Directory Search Page (Cascade CMS KB)
• Page:
  Create a Directory Page (Cascade CMS - Basic Training)