Cards
Card Containers
The following classes are available to put on divs containing cards. The first three use a grid layout, the others use flexbox. Different situations may make one type desireable over the other, but the flex layouts work best in most cases.
- card-2col
- card-3col
- card-4col
- card-2col--flex
- card-3col--flex
- card-4col--flex
The class full-width can be used to break an element out of the flex container. For example, if you have a view using a card flex container, but would like headings as section dividers that span the full width of the container.
<div class="card-3col--flex">
<h2 class="full-width">Section Heading</h2>
<div class="wwu-card"></div>
<div class="wwu-card"></div>
<div class="wwu-card"></div>
</div>
Basic
Unlinked Card
Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Title
Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="wwu-card dark-blue-bg">
<h2 class="title">
<a href="#">Card Title</a>
</h2>
<div class="image">
<img src={Placeholder} alt="leaves in water"/>
</div>
<div class="taxonomy-terms">
<a class="taxonomy-term" href="#">Term Link 1</a>
</div>
<div class="body">
<p>Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt <a href="nothing.pdf">ut labore et dolore magna aliqua.</a></p>
<p><a href="#" class="cta">Call to Action</a></p>
</div>
</div>
Horizontal
Will look the same as basic cards on mobile/small screens
<div class="wwu-card horizontal">
<h2 class="title">
<a href="#">Faolan Griogarach, PhD</a>
</h2>
<div class="image">
<img src={Placeholder} alt="leaves in water placeholder" />
</div>
<div class="taxonomy-terms">
<span class="taxonomy-term">Professor</span>
</div>
<div class="body">
<p>She/her/hers</p>
<p><a href="mailto:faolan.griogarach@wwu.edu">faolan.griogarach@wwu.edu</a></p>
<p><a href="tel:360-650-6820">360-650-6820</a> <span aria-hidden="true">|</span> OM 360</p>
</div>
</div>
Color Block Title Variant
Add the custom class color-block-title, and optionally dark-blue, or light-green, to your card block's custom class field to use this style.
Card Title
Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Unlinked Card
Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Title
Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Faolan Griogarach, PhD
She/her/hers
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Felis donec et odio pellentesque diam volutpat commodo sed egestas. Morbi enim nunc faucibus a pellentesque sit amet porttitor.
360-650-6820 OM 360
<div class="wwu-card color-block-title light-green">
<h2 class="title">
<a href="#">Card Title</a>
</h2>
<div class="image">
<img src={Placeholder} alt="leaves in water"/>
</div>
<div class="taxonomy-terms">
<a class="taxonomy-term" href="#">Term Link 1</a>
</div>
<div class="body">
<p>Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt <a href="nothing.pdf">ut labore et dolore magna aliqua.</a></p> <p><a href="#" class="cta">Call to Action</a></p>
</div>
</div>
Events
This variant is for use in views displaying events. These styles are not available for standard Drupal blocks. See also event lists, for events without images.
Event Title
Old Main Theater but Make The Location Longer
Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Event Title
Old Main Theater but Make The Location Longer
Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="wwu-card event">
<h2 class="title">
<a href="#">Event Title</a>
</h2>
<div class="image">
<img src={Placeholder} alt="leaves in water"/>
</div>
<div class="date">
<span class="month">Apr</span>
<span class="day">04 - 07</span>
<span class="year">2023</span>
</div>
<div class="location">
Old Main Theater but Make The Location Longer
</div>
<div class="body">
<p>Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="wwu-card event alt">
<h2 class="title">
<a href="#">Event Title</a>
</h2>
<div class="image">
<img src={Placeholder} alt="leaves in water"/>
</div>
<div class="date">
<span class="month">Apr</span>
<span class="day">04 - 07</span>
<span class="year">2023</span>
</div>
<div class="location">
Old Main Theater but Make The Location Longer
</div>
<div class="body">
<p>Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Hover Variant
This variant requires different markup from standard cards. It is only available in views or as a hard coded element (not recommened), it is not available for Drupal blocks.
Card Title
Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Another paragraph of text.
Longer card title for 2+ lines
Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Another paragraph of text.
A rather long card title that takes up three or so lines
Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Another paragraph of text.
<div class="hover-card">
<div class="image">
<img src={Placeholder} alt="leaves in water placeholder"/>
</div>
<div class="content">
<h2 class="title">
<a href="#">Card Title</a>
</h2>
<div class="body">
<p>Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Another paragraph of text.</p>
</div>
</div>
<div class="read-more">
<span class='material-icons' aria-hidden='true'>arrow_forward</span>
</div>
</div>
Degree Cards
For degrees displayed on majors pages. These style are fairly specific to the content on those pages and the way the views are built.
Cat Science — Secondary, BAE
Do you like to know why and how cats think? Do you enjoy making yourself feel insignificant? Are you concerned about what makes your cat purr? Want to teach Cat science and other sciences to middle or high school students? This degree leads to recommendations for teaching endorsements in Cat Science.
Contact
Advisor #1, Cat Science Education Advisor
advisor.one@wwu.edu 360-650-5555
Advisor #2, General Science Education Advisor
advisor.two@wwu.edu 360-650-5555
Advisor #3, Cat Science Education Advisor
advisor.three@wwu.edu 360-650-5555