This content block has an 'intro-text' class. The 'intro-text' class will make your text bigger and give it a different font-weight, as well as some bottom margin for visual seperation.

Layout

This layout block has "gutter-bottom'" class - which will add bottom margin.

This layout block has "component'" class - which will add top and bottom margin.

This layout block has "section'" class - which will add more top and bottom margin than "component".

This layout block has "push-down'" class - which will add more bottom margin (twice as much as gutter-bottom)

I've been pushed down.

Layouts with member/non-member content

Please make use of widget permissions. Additionally, to prevent extraneous white space on pages with protected widgets wrapped in layout elements w/ classes like `section` `component` - apply the 'member-content hidden' classes to a layout element wrapping those sections.

for non-member content sections use only a `non-member-content` class

By default, image blocks do not have margin but you can specify margin in the widget's options

OR

add either a 'component' or 'gutter-bottom' class (recommended - also those classes can be used anywhere and ideally they should be used on layout blocks).

The 'component' class is like section - which also adds top and bottom margin - but not as much as '.section' does.

<- Also by default, Images have some drop shadow.

Add a 'no-img-shadow' class to remove the shadow.

This area has a '"banded" class for the background - and also a "padded" class for some inner spacing

Same as above but for this color background use '"banded-secondary"

Same as above but for this color background use '"banded-tertiary"

Same as above but for this color background use '"banded-alt"

Mobile display

If for some reason layout elements don't stack on mobile - add a 'mobile-zero' class to the layout element.

Responsive embed

Use an 'embed-container' class on an element wrapping rich media (like a youtube iframe embed)

Forms

Each form component should be wrapped in a layout block with one of these classes:

.mg-text,
.mg-select,
.mg-checks,
.mg-radios,
.mg-textarea,
.mg-captcha,
.mg-upload,
.mg-submit

I am a label

Select a choice

Select choices

First Choice
Second Choice
Third Choice
Fourth Choice

Select a choice

First Choice
Second Choice
Third Choice

Untitled

Generate New Image

Type the code from the image

Untitled

Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ipsam cum vitae aspernatur quo corporis voluptatem, provident qui nobis eveniet voluptatum reprehenderit fugiat expedita tempore, ipsum, ab, deleniti itaque tenetur.

Est ex assumenda dolor, sunt obcaecati molestiae eveniet et veniam fugit architecto incidunt illum eius ratione quis dolorum aut distinctio laboriosam, deserunt blanditiis sequi porro sit ut vitae voluptas. Reiciendis.

Eveniet suscipit consequatur repudiandae minima adipisci obcaecati atque et doloribus architecto ullam, in aspernatur quis ipsa necessitatibus doloremque saepe, est quod exercitationem magnam inventore minus provident animi totam. Ex, omnis.

This content has a 'centered' class.

This content has a 'divider' class.

This content has a 'light-weight' class.

Special links

I am a '.button' link

I am a '.button-big' link

Jump menu links:

For content that is accessed via a jump menu, add a padded-anchor-link class to the destination content to fix the extra spacing caused by the sticky navbar. See the "Choose Your Path" link on the Career Pathways page here: https://www.elfaonline.org/career-pathways as an example.

Headings

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading

h6. heading

Lists

Ordered list item
Ordered list item
Ordered list item
Ordered list item
Ordered list item

Ordered list item
Ordered list item
Ordered list item
Ordered list item
Ordered list item

Ordered list item
Ordered list item
Ordered list item
Ordered list item
Ordered list item

Unordered list item
Unordered list item
Unordered list item
Unordered list item
Unordered list item

.clean-list item
.clean-list item
.clean-list item
.clean-list item
.clean-list item

Tables

Header	Header	Header	Header
Lorem	ipsum	dolor	sit
Lorem	ipsum	dolor	sit
Lorem	ipsum	dolor	sit
Lorem	ipsum	dolor	sit

table.zebra

Header	Header	Header	Header
Lorem	ipsum	dolor	sit
Lorem	ipsum	dolor	sit
Lorem	ipsum	dolor	sit
Lorem	ipsum	dolor	sit

Icons

All icon spans must include an "icon" class in addition to the classes listed below. (e.g. <span class="icon icon-star"></span>)

Also, if you will be using the icon inline with some text next to it: use a 'spacer-left' or 'spacer-right' class like so:

<span class="icon icon-twitter spacer-right"></span> twitter

See all icons

ELFA MAGAZINE Redesign PULL QUOTES layout

Here are the 3 different kinds of pull quotes you can use in Articles, Columns, Departments and Cover Stories

First layout:

“Lenders have already begun seeing the negative impact that rising operating costs are having on businesses in their portfolios.”

—Nick Colvin, Fifth Third Bank, National Association

Use this:

<div style="background-color: use desired bg color here" class="banded-tertiary padded">
<h5>
<span style="color: use desired color here">
<img src="photo url" style="float: left;">
<br>
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. This would be the quote”
</span>
</h5>
<p><strong>—Name</strong>, Affiliation, Organization</p>
</div>

Second layout:

“Waiting months for equipment is pretty common in the agricultural sector now, and it’s putting a premium on high-quality used equipment.”

—Tony Gordon,Farm Credit Leasing

Use this:

<div class="pull-quote-2">
<img src="photo url"/>
<div>
<h6>
<span style="color: use desired color;">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. This would be the quote” 
</span>
</h6>
<p><strong>—Author</strong>,Organization</p>
</div>
</div>

Third layout:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim urna enim, sit amet eleifend justo imperdiet ac. Mauris nec nisi in enim convallis ultricies.

Use this:

<div class="pull-quote-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim urna enim, sit amet eleifend justo imperdiet ac. Mauris nec nisi in enim convallis ultricies.
</div>

Issue Widget

For current issue section:

Here are the steps in using the LIST LAYOUT template for this widget for singular item issue:

1. Select View current issue home

2. Then go to Advanced

3. Go to Model

4. For the ContentViewDisplayMode field Add Master and save

Equipment Leasing and Finance Association - Investing Forward

Layout

Layouts with member/non-member content

Mobile display

Responsive embed

Forms

Text

Special links

Jump menu links:

Headings

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading

h6. heading

Lists

Tables

table.zebra

Icons

ELFA MAGAZINE Redesign PULL QUOTES layout

First layout:

“Lenders have already begun seeing the negative impact that rising operating costs are having on businesses in their portfolios.”

Use this:

Second layout:

“Waiting months for equipment is pretty common in the agricultural sector now, and it’s putting a premium on high-quality used equipment.”

Use this:

Third layout:

Use this:

Issue Widget

For current issue section:

Here are the steps in using the LIST LAYOUT template for this widget for singular item issue:

About

Industry Topics

News & Publications

Directories

Events & Networking

Membership

Advocacy

Knowledge Hub