FICPA - Style guide
Cover Text
For all banner images like this, you should add an image at least 2000×800.
Image Sizes
Hero Banner
- 2000x800
Content Banner
- 2000x300
Event Cover Image
- 1200x400
Publication Cover Image
- 1350×350
Publication Teaser Image
- 525x200
Column Image - lede
- 700x200
Column Image - background
- 700
Typography
Headings
All HTML headings, <h1> through <h6>, are available.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
CPA - Style guide. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien risus, posuere id mollis in, ullamcorper vel ipsum. Donec sed lobortis est, sed volutpat eros. Etiam auctor nibh et urna elementum lobortis. Donec ut diam sit amet sem eleifend sodales. Ut iaculis est pellentesque, efficitur eros vel, malesuada diam. Vestibulum elementum sollicitudin urna non maximus. Aenean eget nulla at libero commodo tristique. Proin massa urna, ultrices a nulla non, ullamcorper rutrum est. Aenean consequat sodales vulputate. Pellentesque eu sapien quis tellus pulvinar rhoncus aliquet laoreet odio. Donec vel rutrum lacus, id molestie mauris. Donec a ultrices mauris, euismod volutpat eros. Donec nec interdum dui. Donec laoreet ut tellus et blandit.
Button Styles
Blockquotes
For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lists
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Tables
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Image/Text Code Snippet
The following is the code snippet you can add to any WYSIWYG editor in order to make an image/text column layout that you can insert content into. This code uses the Bootstrap Grid, which you can read more about here: https://getbootstrap.com/docs/3.4/css/
<div class="row">
<div class="col-md-4">Image goes here!</div>
<div class="col-md-8">Text goes here!</div>
</div>
Heading
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="row">
<div class="col-md-4">
<div class="align-center">
<div class="field field--name-field-media-image field--type-image field--label-hidden field--item"> <img src="/sites/default/files/2020-10/Vasallo%20Headshot.JPG" width="200" height="215" alt="Vasallo" typeof="foaf:Image" class="img-responsive">
</div>
</div>
</div>
<h2 class="col-md-8">Heading</h2>
<div class="col-md-8">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<!-- 1 columns start -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="card panel panel-default">
<div class="panel-body">
<div class="card-img-top">
<drupal-media data-align="center" data-entity-type="media" data-entity-uuid="66dec1ef-9b82-4ee1-8fe7-54b41588afa2"></drupal-media>
</div>
<div class="card-body text-center">
<h5 class="card-title">Donna Son</h5>
<div class="card-text">
<p>Chief Operating Officer</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 1 columns end -->
<!-- 2 columns start -->
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="card panel panel-default">
<div class="panel-body">
<div class="card-img-top">
<drupal-media data-align="center" data-entity-type="media" data-entity-uuid="66dec1ef-9b82-4ee1-8fe7-54b41588afa2"></drupal-media>
</div>
<div class="card-body text-center">
<h5 class="card-title">Donna Son</h5>
<div class="card-text">
<p>Chief Operating Officer</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card panel panel-default">
<div class="panel-body">
<div class="card-img-top">
<drupal-media data-align="center" data-entity-type="media" data-entity-uuid="7c83f314-a171-4fe1-b6f7-abfdc9421f51"></drupal-media>
</div>
<div class="card-body text-center">
<h5 class="card-title">LeAnne Spell</h5>
<div class="card-text">
<p>Executive Business Manager</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 2 columns end -->
<!-- 3 columns start -->
<div class="row">
<div class="col-md-4">
<div class="card panel panel-default">
<div class="panel-body">
<div class="card-img-top">
<drupal-media data-align="center" data-entity-type="media" data-entity-uuid="66dec1ef-9b82-4ee1-8fe7-54b41588afa2"></drupal-media>
</div>
<div class="card-body text-center">
<h5 class="card-title">Donna Son</h5>
<div class="card-text">
<p>Chief Operating Officer</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card panel panel-default">
<div class="panel-body">
<div class="card-img-top">
<drupal-media data-align="center" data-entity-type="media" data-entity-uuid="7c83f314-a171-4fe1-b6f7-abfdc9421f51"></drupal-media>
</div>
<div class="card-body text-center">
<h5 class="card-title">LeAnne Spell</h5>
<div class="card-text">
<p>Executive Business Manager</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card panel panel-default">
<div class="panel-body">
<div class="card-img-top">
<drupal-media align="center" data-entity-type="media" data-entity-uuid="c21c3d07-6372-44e7-80ec-3814b9614e5e"></drupal-media>
</div>
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<div class="card-text">
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 3 columns end -->
<p>Bottom</p>
Embedding a Podcast
- Click the Source button in the WYSIWYG
- Take the iFrame code snippet from podbean, and insert into the into the WYSIWYG
example:
<iframe data-name="pb-iframe-player" height="315" scrolling="no" src="https://www.podbean.com/media/player/mx8cf-f28f79?from=usersite&vjs=1&skin=1&fonts=Helvetica&auto=0&download=1" style="border: none;" title="Federal Tax Update: IRS Throws in the Towel on One SALT Workaround" width="100%"></iframe>
