LEC Website StyleGuide: Page 2
This page continues the Lincoln Electric Cooperative website design system with approved patterns for the homepage, common content modules, navigation, resource archives, document listings, and interior page headers.
These examples build on the colors, typography, spacing, cards, alerts, content sections, and calls to action documented on the first StyleGuide page.
Homepage Patterns
These patterns define the main homepage structure for Lincoln Electric Cooperative, including the hero section, quick actions, notices, featured content, and homepage calls to action.
Powering Our Community. Building a Brighter Future.
We provide safe, reliable, and affordable electricity to the members we serve today and for generations to come.
Important Member Notice
Use this space for outage information, office closure notices, billing reminders, or other high-priority member updates.
Report an Outage
Report an outage or view current outage status.
Pay My Bill
Make a payment or review billing options.
Start New Service
Start, stop, or transfer electric service.
Energy Efficiency
Find programs, rebates, and energy-saving tips.
Contact Us
Reach our office for member support.
Report an Outage
Report an outage or view current outage status.
Pay My Bill
Make a payment or review billing options.
Start New Service
Start, stop, or transfer electric service.
Energy Efficiency
Find programs, rebates, and energy-saving tips.
Contact Us
Reach our office for member support.
Member Notice: Our office will be closed Monday for scheduled training. Payments may still be made online or by phone.
Planned Service Interruption
Crews will be performing maintenance in the Smith Creek area. Some members may experience a temporary service interruption.
Scam Alert
Members should be cautious of calls or messages demanding immediate payment. Lincoln Electric Cooperative will never ask for payment through gift cards or unusual payment methods.
Homepage Featured Content
Use this pattern to highlight a small set of timely, useful, or high-priority resources on the homepage without turning the page into a full archive.
Featured Resources
Helpful programs, updates, and member resources selected for prominent homepage placement.
Member Resource
Energy Efficiency
Find programs, rebates, and energy-saving tips to help manage your electric use.
Programs & Rebates
Rebates & Programs
Explore available rebates, incentives, and programs that may help lower energy costs.
Cooperative Updates
Cooperative News
Read the latest cooperative updates, member announcements, and community information.
Member Support
Member Services
Find helpful information about billing, service requests, account support, and member resources.
Counting and Data Modules
These styles define how Divi 5 counting modules should be used for cooperative statistics, progress indicators, percentage-based highlights, and time-sensitive countdowns. Use these patterns when a number needs to stand out without creating one-off styling.
Number Counter
Use Number Counter modules for short cooperative statistics that should be easy to scan, such as members served, meters served, miles of line, and years serving.
Members Served
Meters Served
Miles of Line
Years Serving
Bar Counters
Use Bar Counters to show progress or comparisons as a percentage. This style works best when the number represents completion, participation, or progress toward a goal.
- Project Completion80%
- Member Participation65%
- System Update Progress45%
Circle Counters
Use Circle Counter for percentage-based highlights that need strong visual emphasis.
%
Reliability
Countdown Timer
Use Countdown Timer for deadlines, events, office closures, and other time-sensitive items.
Annual Meeting Deadline
Day(s)
:
Hour(s)
:
Minute(s)
:
Second(s)
Common Content Modules
These patterns define reusable styles for content modules that appear across interior pages, resource pages, support pages, and document-heavy sections. Use these styles to keep FAQs, tabs, tables, document links, and embedded content consistent across the site.
Accordion / FAQ
Use accordions for FAQs, grouped support topics, billing details, outage information, rebate requirements, and instructions where users may only need one answer at a time.
Avoid hiding critical emergency information only inside an accordion. Provide a visible summary first when the information is urgent.
How do I report an outage?
If you need to report an outage, use the outage reporting option provided by Lincoln Electric Cooperative or call the office for assistance. Keep outage instructions clear, direct, and easy to find.
Where can I find billing and payment information?
Billing and payment information should be grouped in one place so members can quickly find payment options, assistance information, account details, and related forms.
When should I use an accordion?
Use an accordion when users may only need one answer at a time. Avoid hiding critical emergency information inside an accordion unless the page also provides a clear visible summary.
Tabs
Use tabs for related content groups where members may need to compare options or switch between categories.
Good uses:
- Billing methods
- Service request categories
- Program details
- Current vs archived information
- Member resource groupings
Avoid tabs when:
- The content is critical and should be visible immediately
- The tab labels are long
- Users are likely to need all content at once
Payment Options
Use this tab style when grouping related member actions, such as online payments, phone payments, automatic payments, and in-office payment information.
Service Requests
Use tabs when members need to compare service-related topics without leaving the page, such as new service, disconnects, transfers, or account updates.
Programs
Use tabs for program categories, rebate details, eligibility notes, or grouped resource information that benefits from a compact layout.
Table / Data Display
Use tables for structured information members need to scan, compare, or reference.
Use for:
- Rates
- Fees
- Schedules
- Program details
- Service area information
- Simple comparison data
Desktop/tablet:
Use normal table layout.
Phone:
Use horizontal scroll for true tables and show the helper note:
"Scroll table horizontally to view all columns."
For complex or long tables:
Consider stacked cards or a simplified list instead.
Avoid:
- Using tables only for visual layout
- Too many columns
- Long paragraph text inside table cells
Example: Electric Rate Schedule
Use this style for compact data that members may need to compare. Keep table headings short and avoid unnecessary columns.
Scroll table horizontally to view all columns.
| Rate Class | Description | Energy Charge | Minimum Bill |
|---|---|---|---|
| Residential | Single-family homes | $0.1180 | $15.00 |
| Small General Service | Small businesses | $0.1050 | $25.00 |
| Large General Service | Larger commercial | $0.0890 | $50.00 |
| Irrigation | Seasonal irrigation | $0.0780 | $20.00 |
Example data is for layout demonstration only. Real rates should be verified before publishing.
Single Document / Download Link
Use this pattern for a single form, PDF, policy, report, newsletter, or downloadable resource that needs more context than a plain text link.
Best use: One document with a clear title, short description, file type, and action link.
Current build:
Manual Divi card using Text, Button, and Text Link modules.
Future dynamic option:
Could later be powered by ACF, Media Library metadata, or a Document custom post type.
Residential Rate Schedule
Current electric rates for residential members, including energy charges, demand charges, and minimum bill information.
PDF 452 KB Updated May 1, 2026
Embed / Map Container
Use this pattern for embedded maps, videos, meeting recordings, service territory maps, dashboards, and other externally hosted content.
Best use: Responsive external content that needs to appear directly within a page.
Current build:
Divi Code module using trusted iframe embed code.
Accessibility note:
Give every iframe a descriptive title and provide a direct link when the embedded content may not be accessible or may fail to load.
Navigation and Menu Patterns
These patterns define how members find information, access account tools, and complete important tasks across the Lincoln Electric Cooperative website. The examples establish the visual hierarchy for utility links, primary navigation, dropdown menus, and priority actions. Final sticky, responsive, dropdown, and mobile behavior will be tested in the Divi Theme Builder Global Header.
Member-Focused Navigation
This example demonstrates the recommended relationship between utility links, primary navigation, dropdown content, and high-priority member actions.
Account & Billing Dropdown Example
This static panel documents the recommended desktop dropdown appearance. Opening behavior, placement, keyboard navigation, touch behavior, and mobile presentation will be tested in the Divi Theme Builder Global Header.
Account & Billing
Manage your account, understand your bill, and find payment options.
Navigation Usage and Implementation Notes
These notes define how the approved navigation structure should be used when the final Global Header is built.
Approved navigation structure
Primary navigation: Account & Billing, Outages & Safety, Electric Service, Save Energy & Money, Community, and Your Cooperative.
Utility links: SmartHub Login and Contact Us.
Priority actions: Pay My Bill and Report an Outage.
Implementation requirements
Use only one visible dropdown level. Standard dropdowns should contain approximately five to seven task-focused links followed by one category overview link.
The Lincoln Electric Cooperative logo should link to the homepage. Do not add a separate Home item to the primary navigation.
Test dropdown placement, hover states, keyboard focus, touch behavior, sticky behavior, tablet breakpoints, and mobile menu behavior in the Divi Theme Builder Global Header.
The StyleGuide example defines the visual direction only. Do not duplicate the static example as the final functioning header.
Evaluate whether site search is needed during the Global Header build after the page and document inventory is better defined.
Resource and Archive Listing Patterns
These patterns define how members browse recurring, dated resources such as News & Views issues, cooperative updates, and meeting recaps. The examples establish the visual direction for archive organization, resource cards, dates, summaries, and links. Dynamic filtering, pagination, and content management will be tested when the archive is built with WordPress and Divi.
Recurring Resource Archive
This example demonstrates how members can browse current and previous issues of a recurring cooperative publication. Resources should be organized by year, use consistent date and title information, and provide a clear path to open each item.
2026 News & Views Issues
Browse the current year's issues or select a previous year.
News & Views
June 2026 Issue
Read the latest cooperative news, program updates, safety information, and community highlights.
News & Views
May 2026 Issue
Read cooperative updates, member information, safety reminders, and highlights from across the community.
Resource Archive Usage and Implementation Notes
These notes define how recurring publications and dated resources should be organized when the working archive is built.
Recommended use
Use this pattern for recurring, dated resources such as News & Views issues, Rural Montana publications, annual reports, meeting recaps, election information, cooperative updates, and similar member resources.
Required resource information
Each resource should include a clear title, publication date or issue period, short description, resource type, and direct action link.
Organize recurring resources by year. Display the current year first and provide access to previous years without requiring members to browse unrelated content.
Use consistent action wording such as Open June 2026 Issue, Read Annual Report, or View Meeting Recap.
Image-based and text-only cards
Use the image-based card when a meaningful publication cover, issue thumbnail, or document preview is available. The image should help members recognize the resource and should not be unrelated decorative photography.
Use the text-only card when no useful image is available. Do not require staff to create filler artwork merely to complete the card.
All resource images require descriptive alternative text based on the publication or issue title.
Content management requirements
The StyleGuide cards define the visual direction only. The working archive should use WordPress content, a Divi Loop, Advanced Custom Fields, or another maintainable dynamic structure rather than manually duplicated cards.
A future structured resource entry may include fields for resource type, issue title, publication date, archive year, description, document or page link, and optional cover image.
When the optional image field is empty, the working card must hide the image area completely and display the text-only layout without leaving blank space.
Archive behavior requirements
Test year filtering, pagination, empty archive years, document links, keyboard focus, responsive behavior, and image fallback behavior when the working archive is built.
The year controls shown in this StyleGuide are visual examples only. Their filtering behavior will be determined during the WordPress archive build.
Keep forms, applications, and frequently replaced operational documents in the Document and Form Listing Pattern rather than mixing them into this recurring-resource archive.
Document Listing Patterns
These patterns define how members browse and access operational documents such as forms, applications, policies, rates, rebates, agreements, and other frequently updated files. The examples establish consistent document information, topic grouping, action wording, update indicators, and responsive behavior.
Document Directory
This example demonstrates how documents can be organized by topic and managed from structured WordPress content. Each document provides a clear title, member-focused description, file type, optional document date and update indicator, and a consistent action to view the document.
Billing Documents
Fee & Charges
Schedule of fees and charges.
March 1, 2025
Updated
Word
Member Contact Information Update Form
Use this form to update contact information associated with a member account.
August 17, 2026
Updated
Rules & Regulations
Current Lincoln Electric Cooperative rules and regulations for members.
Document Directory Usage and Implementation Notes
These notes define how operational documents should be organized and maintained through the WordPress document system while Divi controls the approved front-end presentation.
Recommended use
Use this pattern for forms, applications, policies, rates, rebates, agreements, engineering documents, safety information, and other files members may need to view or download.
Required document information
Each Document record should include a clear title, short member-focused description, document file, document type, and at least one Document Category.
The Document Date is optional. Use it for an official revision, effective, publication, or updated date associated with the document. Do not use the WordPress upload date as the document date. Leave the field blank when the document does not provide a confirmed date.
Document type
Select the file type that matches the uploaded document. The current document system supports PDF, Word, Excel, and PowerPoint files. The selected type is displayed beneath the standard document icon.
Updated document indicator
Select the Updated option when a revised document should receive temporary emphasis on the website. Leave the field blank when no update notice is needed, and remove the Updated state when the document no longer requires special emphasis.
Document organization
Assign every document to at least one Document Category. A document may belong to more than one category and will appear automatically in each matching directory section.
Important: A document with no Document Category will not appear in category-filtered directory listings.
Document actions
Use the consistent member-facing action View Document. The link destination is supplied dynamically from the Document File field, so editors do not need to update links inside the Divi layout.
Content management
Staff should manage document content through the WordPress Document record rather than editing the Divi layout. Divi controls presentation while the Document record supplies the title, description, file, date, update state, document type, and category assignments.
Replacing the Document File on a record updates the dynamic document links wherever that record is displayed through this pattern. This supports one maintained document record being reused in multiple category sections or pages.
Directory ordering
Documents within each category are displayed alphabetically by document title. Category headings remain static while the document rows are supplied dynamically through the Divi Loop.
Responsive behavior
On desktop and tablet widths, the document information and View Document action remain in a horizontal row. On phone widths, the main document content uses the full available width and the View Document action moves below the document information.
Interior Page Header Pattern
This pattern defines the standard title area used at the top of interior pages. It combines breadcrumb navigation, the page title, and an optional short introduction so members can quickly understand where they are and what the page contains.
Interior Page Header Example
This example demonstrates how the approved Global Header, breadcrumb navigation, page title, and introductory text work together at the top of an interior page.
Payment Options
Convenient and secure ways to pay your electric bill.
Interior Page Header Usage and Implementation Notes
These notes define how breadcrumb navigation, page titles, introductory text, announcement banners, and page-specific alerts should be arranged on interior pages.
Required header elements
Every standard interior page should include one clear H1 page title. Breadcrumb navigation should appear above the title when it helps members understand the page’s location within the website.
A short introductory description may appear beneath the title when additional context is useful. Do not add introductory text merely to fill space.
Breadcrumb guidance
Breadcrumbs are secondary navigation. They show the page hierarchy and provide links back to broader sections, but they do not replace the primary navigation.
Use the Divi Breadcrumb module so the trail reflects the actual WordPress page hierarchy. The current page should appear as plain text rather than as a link.
Page title and introduction
Use only one H1 on the page. The H1 should clearly identify the page topic using language members understand.
Keep the introductory description concise and focused on the page’s purpose. Detailed instructions and supporting content belong in the main page content below the header.
Announcement banners and alerts
A sitewide announcement banner, when active, should appear below the Global Header and above the Interior Page Header.
A page-specific alert should appear below the complete Interior Page Header and above the main page content. Do not place an alert between the breadcrumbs and page title.
Optional elements
The introductory description may be omitted when the page title provides enough context. Breadcrumbs may also be omitted on shallow or highly focused pages where they do not improve orientation.
Implementation requirements
The StyleGuide example documents the visual relationship between the Global Header and the Interior Page Header. The working site should use the functional Theme Builder Global Header rather than duplicating the static navigation example on every page.
Test the final pattern at desktop, tablet, and phone widths with short and long page titles, deeper breadcrumb paths, and pages both with and without introductory descriptions.