7-rows edit

<!-- components/7-organisms/icons.php --> <!-- uses adjust-row-card-height() to set all cards to have height of tallest card, regardless of wrapping --> <section class="page-theme-wrapper h-theme-inherit"> <div class="wm-row IconRow h-theme-green"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title IconRow__title">New code - Landscape Icon Row</h3> <div class="wm-row__intro-text"> <p>Labore dolorem accusamus odio sint voluptates voluptates dolor adipisci et cum nihil. In doloribus cum at dolorem aliquid distinctio voluptates fuga deleniti quidem ad quibusdam ea. Exercitationem adipisci repudiandae excepturi repellat ut et quas laboriosam aliquid nam.</p> <p>Rerum eligendi velit aperiam reiciendis similique magnam distinctio ducimus provident molestiae ad nobis. Dolor atque molestiae at numquam numquam voluptatem officia odio odio aut. Minus magnam et numquam ea non consequuntur ut quod culpa sint corporis aliquam.</p> </div> <ul class="wm-cards --cards4 h-theme-cards IconRow__cards --landscape"> <li class="wm-card h-theme-card IconRow__card -alt-theme"> <!-- visual area with icon --> <div class=" wm-card__graphic-section IconRow__graphic-section"> <div class="IconRow__icon"> <i class="fa-light fa-alarm-clock" aria-hidden="true"></i> </div> </div> <!-- text area --> <div class="wm-card__text-section IconRow__text-section"> <h4 class="wm-card__title wm-description-text__title IconRow__description-text-title">ALT THEME - Icon Title</h4> <div class="wm-description-text__caption IconRow__description-text-caption"> William & Mary will embrace change to achieve our full potential in environmental and financial sustainability, in diversity, equity and inclusion, and in operational excellence. William & Mary will embrace change to achieve our full potential in environmental and financial sustainability, in diversity, equity and inclusion, and in operational excellence. </div> </div> </li> <li class="wm-card wm-card--isLink h-theme-card IconRow__card"> <!-- visual area with icon --> <div class=" wm-card__graphic-section IconRow__graphic-section"> <div class="IconRow__icon"> <i class="fa-light fa-alarm-clock" aria-hidden="true"></i> </div> </div> <!-- text area --> <div class="wm-card__text-section IconRow__text-section"> <h4 class="wm-card__title wm-description-text__title IconRow__description-text-title"><a href="">IS LINK - Icon Title</a></h4> <div class="wm-description-text__caption IconRow__description-text-caption"> William & Mary will embrace change to achieve our full potential in environmental and financial sustainability, in diversity, equity and inclusion, and in operational excellence. </div> </div> </li> <li class="wm-card h-theme-card IconRow__card"> <!-- visual area with icon --> <div class=" wm-card__graphic-section IconRow__graphic-section"> <div class="IconRow__icon"> <i class="fa-light fa-alarm-clock" aria-hidden="true"></i> </div> </div> <!-- text area --> <div class="wm-card__text-section IconRow__text-section"> <h4 class="wm-card__title wm-description-text__title IconRow__description-text-title">Icon Title</h4> <div class="wm-description-text__caption IconRow__description-text-caption"> William & Mary will embrace change to achieve our full potential in environmental and financial sustainability, in diversity, equity and inclusion, and in operational excellence. </div> </div> </li> <li class="wm-card h-theme-card IconRow__card"> <!-- visual area with icon --> <div class=" wm-card__graphic-section IconRow__graphic-section"> <div class="IconRow__icon"> <i class="fa-light fa-alarm-clock" aria-hidden="true"></i> </div> </div> <!-- text area --> <div class="wm-card__text-section IconRow__text-section"> <h4 class="wm-card__title wm-description-text__title IconRow__description-text-title">Icon Title</h4> <div class="wm-description-text__caption IconRow__description-text-caption"> William & Mary will embrace change to achieve our full potential in environmental and financial sustainability, in diversity, equity and inclusion, and in operational excellence. </div> </div> </li> </ul> </div> </div> </section> <section class="page-theme-wrapper h-theme-green"> <div class="wm-row IconRow h-theme-green"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title IconRow__title">New code - Current Icon Row</h3> <div class="wm-row__intro-text"> <p>Labore dolorem accusamus odio sint voluptates voluptates dolor adipisci et cum nihil. In doloribus cum at dolorem aliquid distinctio voluptates fuga deleniti quidem ad quibusdam ea. Exercitationem adipisci repudiandae excepturi repellat ut et quas laboriosam aliquid nam.</p> <p>Rerum eligendi velit aperiam reiciendis similique magnam distinctio ducimus provident molestiae ad nobis. Dolor atque molestiae at numquam numquam voluptatem officia odio odio aut. Minus magnam et numquam ea non consequuntur ut quod culpa sint corporis aliquam.</p> </div> <ul class="wm-cards --cards2 h-theme-cards IconRow__cards --portrait"> <li class="wm-card h-theme-card IconRow__card -alt-theme"> <!-- visual area with icon --> <div class=" wm-card__graphic-section IconRow__graphic-section"> <div class="IconRow__icon"> <i class="fa-light fa-alarm-clock" aria-hidden="true"></i> </div> </div> <!-- text area --> <div class="wm-card__text-section IconRow__text-section"> <h4 class="wm-card__title wm-description-text__title IconRow__description-text-title">ALT THEME - Icon Title</h4> <div class="wm-description-text__caption IconRow__description-text-caption"> In doloribus </div> </div> </li> <li class="wm-card wm-card--isLink h-theme-card IconRow__card"> <!-- visual area with icon --> <div class=" wm-card__graphic-section IconRow__graphic-section"> <div class="IconRow__icon"> <i class="fa-light fa-alarm-clock" aria-hidden="true"></i> </div> </div> <!-- text area --> <div class="wm-card__text-section IconRow__text-section"> <h4 class="wm-card__title wm-description-text__title IconRow__description-text-title">IS LINK - Icon Title</h4> <div class="wm-description-text__caption IconRow__description-text-caption"> In doloribus at dolorem aliquid distinctio voluptates fuga deleniti quidem ad quibusdam ea. Exercitationem adipisci </div> </div> </li> </ul> </div> </div> </section> <section class="page-theme-wrapper h-theme-inherit"> <div class="wm-row IconRow h-theme-white"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title IconRow__title">New code - Current Icon Row</h3> <div class="wm-row__intro-text"> <p>Labore dolorem accusamus odio sint voluptates voluptates dolor adipisci et cum nihil. In doloribus cum at dolorem aliquid distinctio voluptates fuga deleniti quidem ad quibusdam ea. Exercitationem adipisci repudiandae excepturi repellat ut et quas laboriosam aliquid nam.</p> <p>Rerum eligendi velit aperiam reiciendis similique magnam distinctio ducimus provident molestiae ad nobis. Dolor atque molestiae at numquam numquam voluptatem officia odio odio aut. Minus magnam et numquam ea non consequuntur ut quod culpa sint corporis aliquam.</p> </div> <ul class="wm-cards --cards4 h-theme-cards IconRow__cards --portrait"> <li class="wm-card h-theme-card IconRow__card -alt-theme"> <!-- visual area with icon --> <div class=" wm-card__graphic-section IconRow__graphic-section"> <div class="IconRow__icon"> <i class="fa-light fa-alarm-clock" aria-hidden="true"></i> </div> </div> <!-- text area --> <div class="wm-card__text-section IconRow__text-section"> <h4 class="wm-card__title wm-description-text__title IconRow__description-text-title">ALT THEME - Icon Title</h4> <div class="wm-description-text__caption IconRow__description-text-caption"> Caption text. William & Mary will embrace change to achieve our full potential in environmental and financial sustainability, in diversity, equity and inclusion, and in operational excellence. </div> </div> </li> <li class="wm-card wm-card--isLink h-theme-card IconRow__card"> <!-- visual area with icon --> <div class=" wm-card__graphic-section IconRow__graphic-section"> <div class="IconRow__icon"> <i class="fa-light fa-alarm-clock" aria-hidden="true"></i> </div> </div> <!-- text area --> <div class="wm-card__text-section IconRow__text-section"> <h4 class="wm-card__title wm-description-text__title IconRow__description-text-title">IS LINK - Icon Title</h4> </div> </li> <li class="wm-card h-theme-card IconRow__card"> <!-- visual area with icon --> <div class=" wm-card__graphic-section IconRow__graphic-section"> <div class="IconRow__icon"> <i class="fa-light fa-alarm-clock" aria-hidden="true"></i> </div> </div> <!-- text area --> <div class="wm-card__text-section IconRow__text-section"> <h4 class="wm-card__title wm-description-text__title IconRow__description-text-title">Icon Title</h4> <div class="wm-description-text__caption IconRow__description-text-caption"> Caption text </div> </div> </li> <li class="wm-card h-theme-card IconRow__card"> <!-- visual area with icon --> <div class=" wm-card__graphic-section IconRow__graphic-section"> <div class="IconRow__icon"> <i class="fa-light fa-alarm-clock" aria-hidden="true"></i> </div> </div> <!-- text area --> <div class="wm-card__text-section IconRow__text-section"> <h4 class="wm-card__title wm-description-text__title IconRow__description-text-title">Icon Title</h4> <div class="wm-description-text__caption IconRow__description-text-caption"> Caption text </div> </div> </li> </ul> </div> </div> </section> <style> .icon-table { display: none; } </style> <?php // output all the row options //$themeArray = ["green", "silver", "white"]; $themeArray = ["green", "silver", "white"]; $themeNames = array("inherit", "green", "silver", "white", "image"); $orientationArray = ["portrait", "landscape "]; $optionArray = ["", "t-alt"]; $iconArray = [ ["abacus", "abacus"], ["address-book", "address-book"], ["alarm-clock", "alarm-clock"], ["ampersand", "ampersand"], ["anchor", "anchor"], ["arrow-down-to-bracket", "arrow-down-to-bracket"], ["arrow-trend-up", "arrow-trend-up"], ["arrow-up-from-square", "arrow-up-from-square"], ["comment", "comment"], ["comments", "comments"], ["compass", "compass"], ["desktop", "desktop"], ["diploma", "diploma"], ["dollar-sign", "dollar-sign"], ["dolly", "dolly"], ["earth-americas", "earth-americas"], ["envelope", "envelope"], ["exclamation", "exclamation"], ]; $textShort = 'This is a short caption.'; $textLong = 'William & Mary will embrace change to achieve our full potential in environmental and financial sustainability, in diversity, equity and inclusion, and in operational excellence.'; $landscapeTextShort = 'This is a short caption.'; $landscapeTextLong = 'William & Mary will embrace change to achieve our full potential in environmental and financial sustainability, in diversity, equity and inclusion, and in operational excellence.'; $captionArray = ["", $textShort, $textLong]; $landscapeCaptionArray = ["", $landscapeTextShort, $landscapeTextLong]; // 3 themes - per row // 2 orientations - per row // portrait // caption on/off // landscape // caption on // title on/off - per row // link on/off - per card // output rows with num of cards between 2 and 8 $numCards = 2; $maxCards = 12; $hasCaption = 0; $hasTitle = false; $isLink = true; $isAlt = ""; // for each orientation type - output 2-8 rows foreach ($orientationArray as $orientationType) { if ($orientationType == "landscape ") { $hasCaption = true; } // output rows until max cards reached $currentNum = 4; $currentTheme = 0; // use white for this testing loop for ($i = 0; $i < $maxCards - 1; $i++) { ?> <p style="background: black; color: white; font-weight: bold; text-align:center;margin:0;padding:8px 0;"> <?php echo $orientationType; echo $hasCaption ? ", has caption" : ", no caption"; echo $isLink ? ", has links" : ", no links"; echo $isAlt == "" ? ", colors v1" : ", colors v2"; echo $hasTitle ? ", has title" : ", no title"; ?> </p> <section class="page-theme-wrapper h-theme-inherit"> <div class="wm-row IconRow h-theme-<?php echo $themeArray[$currentTheme]; ?>"> <div class="wm-row__mainWrapper"> <?php if ($hasTitle) { ?> <h3 class="wm-row__title IconRow__title">New code - Icon Row</h3> <?php }; ?> <div class="wm-row__intro-text"> <p> <?php echo $textLong; ?> </p> </div> <ul class="wm-cards --cards<?php echo ($currentNum - 2) . ' h-theme-cards IconRow__cards --' . $orientationType; ?>"> <?php // output cards from 2-8 for ($j = $numCards; $j < $currentNum; $j++) { if ($j == $maxCards + 2) { break; }; // if link, output link classes and tag echo ' <li class="wm-card h-theme-card IconRow__card' . $isAlt; if ($isLink) { echo ' wm-card--isLink'; } echo '"> <!-- visual area with icon --> <div class=" wm-card__graphic-section IconRow__graphic-section"> <div class="IconRow__icon"> <i class="fa-light fa-' . $iconArray[$j][1] . '" aria-hidden="true"></i> </div> </div> <!-- text area --> <div class="wm-card__text-section IconRow__text-section"> <h4 class="wm-card__title wm-description-text__title IconRow__description-text-title">'; if ($isLink) { echo '<a href="#">'; } echo 'Icon Title'; if ($isLink) { echo '</a>'; } echo '</h4>'; // if has caption, output caption echo '<div class="wm-description-text__caption IconRow__description-text-caption">'; if ($orientationType == "landscape ") { echo $landscapeCaptionArray[$hasCaption]; } else { echo $captionArray[$hasCaption]; } echo '</div>'; echo '</div> </li>'; } $currentNum = $currentNum + 1; echo '</ul> </div> </section> '; // swap per row settings $hasTitle == false ? $hasTitle = true : $hasTitle = false; if ($hasCaption == 0) { $hasCaption = 1; } else if ($hasCaption == 1) { $hasCaption = 2; } else { $hasCaption = 0; } $isLink == false ? $isLink = true : $isLink = false; if ($currentTheme == 2) { $currentTheme = 0; $isAlt == "" ? $isAlt = " -alt-theme" : $isAlt = ""; //$caption == $textShort ? $caption = $textLong : $caption = $textShort; // if ($orientationType == "portrait") { // $hasCaption == false ? $hasCaption = true : $hasCaption = false; // } else { // $hasCaption = true; // } } else { $currentTheme += 1; } } } $faIconArray = [ ["abacus", "abacus"], ["address-book", "address-book"], ["alarm-clock", "alarm-clock"], ["ampersand", "ampersand"], ["anchor", "anchor"], ["arrow-down-to-bracket", "arrow-down-to-bracket"], ["arrow-trend-up", "arrow-trend-up"], ["arrow-up-from-square", "arrow-up-from-square"], ["arrows-minimize", "arrows-minimize"], ["atom-simple", "atom-simple"], ["award", "award"], ["backpack", "backpack"], ["bacteria", "bacteria"], ["badge-check", "badge-check"], ["badge-dollar", "badge-dollar"], ["bag-shopping", "bag-shopping"], ["balloon", "balloon"], ["ballot-check", "ballot-check"], ["ban", "ban"], ["bank", "bank"], ["bars-progress", "bars-progress"], ["bed", "bed"], ["bell", "bell"], ["bicycle", "bicycle"], ["book", "book"], ["book-open", "book-open"], ["books", "books"], ["box-open", "box-open"], ["bowl-hot", "bowl-hot"], ["brain", "brain"], ["briefcase", "briefcase"], ["briefcase-medical", "briefcase-medical"], ["building", "building"], ["bullhorn", "bullhorn"], ["bullseye-arrow", "bullseye-arrow"], ["burger-soda", "burger-soda"], ["bus", "bus"], ["calculator", "calculator"], ["calendar-days", "calendar-days"], ["calendar-clock", "calendar-clock"], ["camera", "camera"], ["car", "car"], ["cart-shopping", "cart-shopping"], ["chalkboard-user", "chalkboard-user"], ["chart-pie-simple", "chart-pie-simple"], ["circle-info", "circle-info"], ["circle-play", "circle-play"], ["clipboard", "clipboard"], ["clock", "clock"], ["comment", "comment"], ["comments", "comments"], ["compass", "compass"], ["desktop", "desktop"], ["diploma", "diploma"], ["dollar-sign", "dollar-sign"], ["dolly", "dolly"], ["earth-americas", "earth-americas"], ["envelope", "envelope"], ["exclamation", "exclamation"], ["family-pants", "family-pants"], ["file", "file"], ["fish", "fish"], ["flag", "flag"], ["flag-pennant", "flag-pennant"], ["flask", "flask"], ["folder-open", "folder-open"], ["fork-knife", "fork-knife"], ["forward", "forward"], ["gear", "gear"], ["gift", "gift"], ["graduation-cap", "graduation-cap"], ["hand-fist", "hand-fist"], ["hands-holding-heart", "hands-holding-heart"], ["handshake", "handshake"], ["hashtag", "hashtag"], ["head-side-brain", "head-side-brain"], ["head-side-heart", "head-side-heart"], ["heart", "heart"], ["hotel", "hotel"], ["house", "house"], ["house-laptop", "house-laptop"], ["id-card", "id-card"], ["images", "images"], ["key", "key"], ["keynote", "keynote"], ["laptop", "laptop"], ["leaf", "leaf"], ["lightbulb-on", "lightbulb-on"], ["location-dot", "location-dot"], ["magnifying-glass", "magnifying-glass"], ["map-location-dot", "map-location-dot"], ["mask-face", "mask-face"], ["medal", "medal"], ["message-exclamation", "message-exclamation"], ["message-question", "message-question"], ["message-quote", "message-quote"], ["microphone", "microphone"], ["microscope", "microscope"], ["mobile-screen-button", "mobile-screen-button"], ["money-bill-1-wave", "money-bill-1-wave"], ["mug-saucer", "mug-saucer"], ["music", "music"], ["newspaper", "newspaper"], ["panorama", "panorama"], ["paperclip", "paperclip"], ["paper-plane", "paper-plane"], ["pen", "pen"], ["person-swimming", "person-swimming"], ["phone", "phone"], ["photo-film", "photo-film"], ["piggy-bank", "piggy-bank"], ["podcast", "podcast"], ["puzzle-piece", "puzzle-piece"], ["recycle", "recycle"], ["rocket-launch", "rocket-launch"], ["rss", "rss"], ["scale-balanced", "scale-balanced"], ["school", "school"], ["screen-users", "screen-users"], ["screwdriver-wrench", "screwdriver-wrench"], ["scroll-old", "scroll-old"], ["seedling", "seedling"], ["ship", "ship"], ["shirt", "shirt"], ["signal-stream", "signal-stream"], ["signs-post", "signs-post"], ["square-parking", "square-parking"], ["star-sharp", "star-sharp"], ["sun", "sun"], ["thought-bubble", "thought-bubble"], ["thumbs-up", "thumbs-up"], ["ticket", "ticket"], ["timeline", "timeline"], ["trees", "trees"], ["trophy", "trophy"], ["umbrella", "umbrella"], ["user", "user"], ["user-group", "user-group"], ["users", "users"], ["user-shield", "user-shield"], ["video", "video"], ["virus", "virus"], ["wheelchair", "wheelchair"], ["wifi", "wifi"] ]; // output icon help table // foreach ($themeArray as $themeType) { // ?> <!-- <div class="c-row"> <table class="icon-table tablespecial"> <tbody> <tr> <td>Icon name</td> <td>Filled</td> <td>Outline</td> <td>Duotone</td> </tr> <?php // foreach ($faIconArray as $icon) { // echo '<tr> // <td>' . $icon[0] . '</td> // <td><i class="fa-solid fa-' . $icon[1] . '"></i></td> // <td><i class="fa-light fa-' . $icon[1] . '"></i></td> // <td><i class="fa-duotone fa-' . $icon[1] . '"></i></td> // </tr>'; // }; ?> </tbody> </table> </div> --> <?php //}; ?> <div class="iconcode"> <?php // foreach ($faIconArray as $name) { // echo '<dropdown-item value="' . $name[0] . '" label="' . $name[0] . '" ></dropdown-item>'; // }; ?> </div> <script src='<?php echo $base_url; ?>/js/adjust-row-card-height.js'></script>