Grand Buttons
Using Grand Buttons
When you need a button to have more emphasis and visual weight, Grand Buttons provide a quick method for styling large buttons with an icon and text.
To style the buttons, wrap the button in grid size you'd like and then add the .grand-button class to your anchor link.
<a href="#" class="grand-button">
<div class="grand-button-label">Button Text</div>
</a> Style Note: Because Grand Buttons have display:block; they will take the width of whatever <div> (or Bootstrap column) contains it.
Helper Classes! You can apply any of the shadow styles or color styles to Grand Buttons for added emphasis.
Grand Buttons + Icons
In combination with any of the available icons, you can create Grand Buttons with Icons:
<a href="#" class="grand-button">
<span aria-hidden="true" class="ico fas fa-star"></span>
<div class="grand-button-label">Button Text</div>
</a> Responsive Note: At browser widths under 767px the icons will disappear.
Grand Button Sizes
For added flexibility, we offer Grand Buttons in large and small formats.
Large Grand Buttons .grand-button-lg
<a href="#" class="grand-button grand-button-lg">
<span aria-hidden="true" class="ico fas fa-star"></span>
<div class="grand-button-label">Start Here</div>
</a>Grand Photo Buttons & Sizes
These are used similarly to Grand Buttons above, but for flexibility, feature an image instead of an icon.
Style Note: Though any image size can be used in Grand Photo Buttons, we recommend images with dimensions of 576 pixels by 250 pixels. Even if the images are rendered smaller than that on desktop, when in a mobile view, the photo buttons will go full width and an image with this resolution will look best.
Style Note: Just like Grand Buttons above, Grand Photo Buttons are styled with display:block; and will take the width of whatever <div> (or Bootstrap column) contains it.
And since these photos'/images' dimensional ratio will stay the same, as the width expands or contracts, so will its height.
<a href="#" class="grand-photo-button">
<img src="https://via.placeholder.com/575x250" alt=""/>
<span class="grand-button-label">Academics</span>
</a>Large Grand Photo Buttons .grand-photo-button-lg
Style Notice! This style will only change the size and spacing of the button label and not the size of the photo itself. To make the photo appear larger, place the button inside of a wider Bootstrap column, or use an image with a height larger than 250px. But if you use an image with a larger height, it will appear much larger on mobile.
<a href="#" class="grand-photo-button">
<img src="https://via.placeholder.com/575x250" alt=""/>
<span class="grand-button-label">Academics</span>
</a>