7-rows edit

<!-- components/7-rows/_base-row.php --> <!-- BASE ROW HTML Copy this when starting a new row to get all the standard classnames and structure CSS NOTES: ._wm-row-base-component.scss provides all the necessary styles for standard row elements For a new row, just add any necessary overrides to that row's .scss file ROW SIZING CSS VARIABLES These are used for sizes on default row elements and can be reused as needed in row css. --size-row-width-max: 1288px --size-row-padding-top: 88px --size-row-padding-bottom: 88px --size-row-padding-side-mobile: 22px --size-row-padding-side-default: 44px --size-row-text-width-max:808px --size-row-title-margin-bottom:43px --wm-row-side-padding-external: var(--size-row-padding-side-mobile); BREAKPOINTS: These are the standard SASS variables used for breakpoints - $mobile-to-wide-mobile-breakpoint: 700 - $mobile-to-desktop-breakpoint: 930 - $desktop-to-wide-desktop-breakpoint: 1215 - $wide-desktop-to-ultrawide-desktop-breakpoint: 1680 Example usage: @include breakpoint($mobile-to-wide-mobile-breakpoint) { ... } COLOR THEMES: ._wm-row-base-component.scss provides all the theme color styles for standard row elements CSS variables for other needs can be found on the cheatsheet in Atomic Docs: /atomic-docs/wm/atomic-core/?cat=cheatsheet ROWS WITH NO SIDE PADDING: To create a row with no side padding (for example, the news and events slideshow rows) add this mixin at the top of the row's .scss file: @include wm-row__noSidePadding(); --> <!-- STANDARD ROW WRAPPERS --> <!-- <section class="page-theme-wrapper h-theme-<?php echo $useTheme; ?>"> --> <div class="RowName wm-row h-theme-green"> <div class="wm-row__mainWrapper"> <!-- STANDARD ROW TITLE AND INTRO TEXT --> <h3 class="wm-row__title RowName__title">Base Row Title</h3> <div class="wm-row__intro-text RowName__intro-text"> <p>Base row intro text. Lorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p> <p>Cards UL wrapper component: wm-cards-component.php</p> </div> <!-- STANDARD CARD COMPONENTS, delete if not using cards --> <!-- .cards4, .cards5, .cards6, .cards7, .cards9 are used for layout fixes portrait is default, use .--landscape for horizontal --> <ul class="wm-cards --cards4 h-theme-cards --landscape RowName__cards"> <!-- wm-card-component is the standard for icon-style cards components/4-row-components/wm-card-component.php --> <?php outputRowComponent("wm-card-component"); ?> <!-- wm-image-component is the standard for cards with photos components/4-row-components/wm-image-card.php --> <?php outputRowComponent("wm-image-card"); ?> </ul> <div class="RowName__message h-theme-card"> <p>Message...</p> </div> <!-- STANDARD ROW BUTTONS COMPONENT components/4-row-components/wm-row-buttons.php --> <?php outputRowComponent("wm-row-buttons"); ?> <!-- STANDARD ROW MORE LINK --> <a class="wm-row__moreButton RowName__moreButton" href="" target="_self">More link ...</a> </div> </div> <!-- </section> -->