...
When adding a Directory Search page, the content for the sample profile cards are provided in the second row. Click on the Column Content.
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.
...
If you would like to remove content from the card or edit the card using the code view, click on the Source Code
icon.Status title <> In the Source code editor, click on the Format Code icon and then Toggle Fullscreen Mode icon to expand the window size.
Locate the section of the card you would like edit using the code comment notations.
If you are removing a section of a card, make sure to remove the entire HTML element.
...
Copy the Code Snippet below to add a card to the list.
Edit the sample content.
| Code Block | breakoutMode | wide
|---|
<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
...