Components and Utilities
In addition to having access to Athena Framework styles, the components and utilities listed below are available for use with the UCF WordPress Theme:
- Chevron lists
- Count up (animated number increments)
- Fact grids, icons
- Media background video start/stop buttons
Add extra emphasis to an unordered list with gold chevron icons (using FontAwesome).
Gold chevrons will grow and shrink relative to the font size of the unordered list.
<ul class="list-chevrons">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>The .list-chevrons list can be combined with other utility classes to modify the space between each list item, or re-arrange how they're stacked:
<ul class="list-chevrons d-flex flex-column">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul><ul class="list-chevrons">
<li class="mr-3">list item</li>
<li class="mr-3">list item</li>
<li>list item</li>
</ul>NOTE: Chevron lists are currently not compatible with Athena's .nav classes.
Animate numbers on page load using the .count-up class and optional data attributes. The animation will only run once.
Supports numbers that include commas, but other characters are not supported (e.g. decimals, dollar signs) and are removed when the increment animation begins.
Use sparingly! This feature is best suited for promotional/marketing percentages and statistics.
<span class="count-up">12,345</span>Need to increment a percentage, dollar amount, or decimal value? Wrap valid numbers in separate <span>'s, like so:
<span class="count-up">75</span>%
$<span class="count-up">12,345</span>.<span class="count-up">67</span>| Option | Description | Default |
|---|---|---|
data-start |
The number the animation should start from | 0 |
data-num |
The number that the animation should complete with | The number wrapped within the .count-up element |
<span class="count-up" data-start="5" data-num="10">10</span>
Fact grids provide a large, stylized option for displaying statistics and other pieces of information. The fact grid classes are designed to be used on their own, or in conjunction with Athena rows and columns for more advanced layout generation.
By default, fact blocks will be 100% width stacked at the -xs breakpoint, then be 50% wide at -sm+ (creating rows of 2 blocks each). If Athena grid classes are also used, the .col- sizes will take effect instead.
Creates a 2x2 fact grid:
<div class="fact-grid-wrap">
<div class="fact-grid">
<div class="fact-block">...</div>
<div class="fact-block">...</div>
<div class="fact-block">...</div>
<div class="fact-block">...</div>
</div>
</div>Creates a 1x3 row of blocks. (Example uses the Athena Shortcodes Plugin)
[container class="fact-grid-wrap"]
[row class="fact-grid"]
[col sm="4" class="fact-block"]...[/col]
[col sm="4" class="fact-block"]...[/col]
[col sm="4" class="fact-block"]...[/col]
[/row]
[/container]Fact grids are expected to contain an even number of fact blocks.
Fact blocks should consist of two parts: a header (either an icon, or arbitrary text), and some descriptive content.
Text-based fact headers are expected to be used in conjunction with other utility classes to modify font face, size, etc. Remember to test your font overrides at all breakpoints to ensure your text fits at all supported screen sizes.
<div class="fact-block">
<aside>
<div class="fact-header">123,456</div>
<p>My description</p>
</aside>
</div>If your image contains text not included in the fact description, remember to add it to the <img> alt text!
<div class="fact-block">
<aside>
<img class="fact-header fact-header-icon img-fluid" src="..." alt="...">
<p>My description</p>
</aside>
</div>Use the .fact-header-lg class in conjunction with .fact-header to enforce fixed heights and vertical positioning across all fact headers within a grid.
<div class="fact-block">
<aside>
<div class="fact-header fact-header-lg">123,456</div>
<p>My description</p>
</aside>
</div>
<div class="fact-block">
<aside>
<img class="fact-header fact-header-lg fact-header-icon img-fluid" src="..." alt="...">
<p>My description</p>
</aside>
</div>The outer wrapper element for a fact grid. Required. Can be combined with Athena .container's.
Contains single rows of fact blocks. Required. Can be combined with Athena .row's.
Outermost element for a single fact block. Required. Can be combined with Athena's .col-* classes.
Represents a header within a fact block. Required for all fact headers (image or text).
Optional header modifier class that enforces a fixed height on the fact header for consistency across all blocks in the grid.
Header modifier class for image-based fact headers only. Enforces a fixed height for image/icon fact headers at the -xs breakpoint.
This theme comes with built-in JavaScript and utility classes for defining buttons that pause/play media background videos. Playback settings are stored per-user via a cookie. If a user disables playback on one page, it is disabled on subsequent page loads.
This button is always applied to page headers that include video. This button should always be included on any media background video for accessibility reasons; do not attempt to hide, disable, or exclude it.
Need to include a media background programatically in a child theme? Use existing media background utility functions to generate a media background; see includes/media-backgrounds.php.
<div class="media-background-container">
<video class="hidden-xs-down media-background media-background-video object-fit-cover" muted>
...
</video>
<button class="media-background-video-toggle btn play-enabled hidden-xs-up" type="button" data-toggle="button" aria-pressed="false" aria-label="Play or pause background videos">
<span class="fa fa-pause media-background-video-pause" aria-hidden="true"></span>
<span class="fa fa-play media-background-video-play" aria-hidden="true"></span>
</button>
</div>
Hard and soft box shadow utility classes allow you to add emphasis to block-level elements. Use sparingly!
Adds a soft, spread, dark shadow.
Adds a soft, spread, white shadow.
Adds a sharp, 1px dark shadow.
Adds a sharp, 1px white shadow.
Rotation utilities are available to add visual contrast for block-level elements. Useful for showcasing things like publications, viewbooks, etc. Use sparingly!
Not recommended for text, buttons, etc. due to readability concerns.
Rotates the element at a slight left angle.
Rotates the element at a slight right angle.
Hard and soft text shadow utility classes allow you to add emphasis to text. Use sparingly!
Best suited for text overlaid on top of high-contrast media background images/video to help improve readability.
Adds a soft, spread, dark shadow.
Adds a soft, spread, white shadow.
Adds a sharp, 1px dark shadow.
Adds a sharp, 1px white shadow.