LEC Website StyleGuide
This StyleGuide documents the approved visual system and reusable content patterns for the Lincoln Electric Cooperative website rebuild in WordPress using Divi 5.
This first page contains the foundational design system and general interior-content patterns, including colors, typography, buttons, cards, contact blocks, alerts, notices, content sections, and calls to action.
Colors
The LEC color system keeps the website consistent across headings, text, buttons, cards, alerts, backgrounds, and reusable content blocks.
lec-primary
Value: #38675b
Main brand green. Use for primary brand moments, key accents, and strong visual identity.
lec-primary-light
Value: #eaf2ef
Soft green background. Use for quiet sections, cards, and supporting areas.
lec-primary-dark
Value: #24463e
Dark brand green. Use for high-emphasis sections, dark cards, and strong contrast areas.
lec-secondary
Value: #4bb649
Bright support green. Use for positive highlights, success states, and selected accents.
lec-secondary-light
Value: #eaf8ea
Soft support green. Use for subtle success areas, light highlights, and quiet supporting backgrounds.
lec-secondary-dark
Value: #2f7d32
Darker support green. Use when secondary green needs stronger contrast or more visual weight.
lec-accent-orange
Value: #ef8552
Warm accent color. Use sparingly for highlights, notices, and supporting visual emphasis.
lec-accent-gold
Value: #ffa918
Gold accent color. Use for warm highlights, attention areas, and secondary visual emphasis.
lec-accent-yellow
Value: #f5ce38
Bright accent yellow. Use sparingly for highlights, callouts, and attention areas.
lec-alert
Value: #ef8552
Alert color. Use for important notices, warnings, or content that needs extra attention.
lec-warning
Value: #ffa918
Warning color. Use for caution messages, deadline reminders, and important service notes.
lec-success
Value: #4bb649
Success color. Use for positive states, confirmations, and completed actions.
lec-heading
Value: #273633
Primary heading color. Use for major headings, section titles, and strong text hierarchy.
lec-text
Value: #273633
Main text color. Use for readable body copy and important page content.
lec-text-muted
Value: rgba(0, 0, 0, 0.7)
Muted text color. Use for descriptions, helper text, notes, and lower-emphasis copy.
lec-text-on-dark
Value: #ffffff
Text color for dark backgrounds. Use when placing copy over dark green or other dark sections.
lec-background
Value: #ffffff
Main page background color. Use for standard white sections and clean content areas.
lec-background-soft
Value: #f7faf8
Soft section background. Use to separate content areas without creating heavy contrast.
lec-background-muted
Value: #eaf2ef
Muted green background. Use for quiet panels, supporting sections, and soft cards.
lec-border
Value: rgba(0, 0, 0, 0.12)
Default border color. Use for subtle card borders, dividers, and low-emphasis outlines.
lec-border-strong
Value: #c7d5d1
Stronger border color. Use when a card, divider, or outline needs more definition.
lec-white
Value: #ffffff
Pure white utility color. Use only when a specific white value is needed.
lec-black
Value: #000000
Pure black utility color. Use sparingly for special cases, not standard body text.
lec-alert-dark
Value: #c85f32
Darker alert color. Use for stronger alert emphasis, borders, or dark warning accents.
Typography
The LEC typography system uses clear heading and body styles to keep pages readable, consistent, and easy to scan across desktop, tablet, and phone layouts.
Heading Font
Variable: lec-font-heading
Font: Be Vietnam Pro
Used for page titles, section headings, card titles, and other high-emphasis text.
Body Font
Variable: lec-font-body
Font: Urbanist
Used for paragraph text, descriptions, notes, lists, and most member-facing copy.
UI Font
Variable: lec-font-ui
Font: Urbanist
Used for buttons, navigation, labels, small interface text, and reusable website controls.
Heading Scale
H1 Page Title Example
Use H1 once per page for the primary page title.
H2 Section Heading Example
Use H2 for major page sections.
H3 Subsection Heading Example
Use H3 for reusable block titles, card groups, and major pattern examples.
H4 Small Heading Example
Use H4 for smaller content groups and nested sections.
H5 Supporting Heading Example
Use H5 for usage notes, supporting labels, and documentation headings.
H6 Minor Heading Example
Use H6 sparingly for the smallest structured headings when another heading level is required.
Typography Implementation Notes
Default presets
The LEC typography system is maintained through two default Divi field presets:
- LEC Text System: Controls body text, inline links, unordered lists, ordered lists, and blockquotes.
- LEC Heading System: Controls H1 through H6, including responsive sizes, font family, weight, color, line height, and letter spacing.
Responsive typography
Both presets include approved Desktop, Tablet, and Phone settings. New Text modules should inherit these defaults without requiring manual typography setup.
Contextual overrides
Override individual settings only when an approved pattern requires a variation, such as white text on a dark background, centered hero text, smaller metadata, navigation links, breadcrumbs, or document action links.
Default link treatment
Standard inline links use the lec-link global color with an underline. Navigation links, breadcrumbs, button-style links, document actions, and links on dark backgrounds may use documented contextual overrides.
Layout independence
The typography presets do not control module width, max width, margin, padding, background, border, radius, or alignment. Those settings remain specific to each reusable pattern.
Body Text
Font: lec-font-body
Color: lec-text-muted
Standard paragraph text is used for most member-facing content. It should be clear, readable, and not overly dense.
Link Text
Color: lec-link
Links should be clear, descriptive, and used for navigation or helpful next steps.
Supporting Text
This is supporting text for notes, metadata, helper descriptions, and secondary information.
List Text
Use: short grouped information
- Keep list items brief.
- Use lists for scan-friendly content.
- Avoid long, crowded lists.
Buttons
Buttons help members take clear action. Use button styles consistently so primary actions, secondary actions, and simple text links are easy to recognize across the site.
Primary Button
Use: Main action on a section or page.
Secondary Button
Use: Supporting action when the primary action is already present.
Dark Button
Use: High-emphasis button for dark or high-contrast sections.
Text Link Button
Use: Low-emphasis action or secondary navigation link.
Style Cards
Cards group related information into reusable blocks. Use them for quick links, member resources, service information, notices, and other content that should be easy to scan.
Basic Content Card
Use a basic card to group short, related content such as member resources, service descriptions, or quick explanations.
Pattern type: Standard information card
Recommended background: lec-background
Recommended border: lec-border
Soft Background Card
Use a soft background card when a content block needs gentle separation without feeling heavy or overly prominent.
Pattern type: Soft information card
Recommended background: lec-background-soft
Recommended border: lec-border
Highlight Card
Use a highlight card for important supporting information, featured resources, or content that should stand out from nearby cards.
Pattern type: Highlight information card
Recommended background: lec-primary-light
Recommended border: lec-border-strong
Card with Button
Use this pattern when a card includes a short description and one clear action.
Pattern type: Action card
Recommended button: Primary or secondary button
Alert Card
Use alert cards for important notices, deadlines, outages, billing reminders, or content that needs extra attention.
Pattern type: Notice or alert card
Recommended accent: lec-alert
Dark CTA Card
Use a dark CTA card when a section needs strong emphasis and a clear next step.
Pattern type: High-emphasis call-to-action card
Recommended background: lec-primary-dark
Contact Blocks
Contact blocks provide consistent patterns for office phone numbers, payment phone numbers, addresses, email, hours, and other member service details.
Office Phone
(406) 889-3301
Use this number for general office contact and member service questions.
Variable: lec-phone-office
Payment Phone
(855) 940-3833
Use this number for payment-related calls and automated payment access.
Variable: lec-phone-payments
Office Hours
Monday - Thursday, 7:00 a.m. - 5:30 p.m.
Use this value when showing standard office availability or member service hours.
Variable: lec-hours
Office Address
312 Osloski Rd, Eureka, MT 59917
Use the short address when a compact location format is needed.
Variable: lec-address-short
info@lincolnelectric.coop
Use this email for general contact references and member service information.
Variable: lec-email
Fax
(406) 889-3874
Use this number only where fax contact information is specifically needed.
Variable: lec-fax
Office Phone Block
This pattern highlights the main office phone number with a short explanation for when members should use it.
Office Phone
(406) 889-3301
Call the office for general questions, member service, account assistance, and cooperative business.
Variable: lec-phone-office
Recommended use: General office contact, member service pages, contact pages, and support sections.
Payment Phone Block
This pattern highlights the automated payment phone number for members who want to make a payment by phone.
Payment Phone
(855) 940-3833
Use this number for payment-related calls and automated payment access.
Variable: lec-phone-payments
Recommended use: Payment pages, billing sections, member service pages, and contact pages where payment-by-phone information is needed.
Address Block
This pattern highlights the cooperative office address for contact pages, location references, and member service information.
Office Address
312 Osloski Rd,
Eureka, Montana 59917
United States
Use this address for office visits, mailed correspondence, and location references.
Variable: lec-address
Recommended use: Contact pages, office location sections, footer contact areas, and member service pages where the full mailing or office address is needed.
Office Hours Block
This pattern highlights standard office hours for contact pages, service information, and member support sections.
Office Hours
Monday - Thursday, 7:00 a.m. - 5:30 p.m.
Use this value when showing standard office availability or member service hours.
Variable: lec-hours
Recommended use: Contact pages, footer contact areas, member service sections, and support pages where standard office hours are needed.
Email Block
This pattern highlights the cooperative email address for general questions and non-emergency member communication.
info@lincolnelectric.coop
Use this email for general questions and non-emergency cooperative communication.
Variable: lec-email
Recommended use: Contact pages, footer contact areas, member service sections, and pages where a general cooperative email address is needed.
Fax Block
This pattern documents the cooperative fax number for forms, documentation, and cases where fax contact information is specifically required.
Fax
(406) 889-3874
Use this number only where fax contact information is specifically needed.
Variable: lec-fax
Recommended use: Contact pages, forms, documentation instructions, and member service pages where fax information is required.
Alerts and Notices
Use these patterns for important messages, service updates, outage information, warnings, and confirmations. Alert styles should be clear, readable, and used consistently across the site.
General Info Notice
This notice style is used for helpful information, routine reminders, and general updates that members should see but that do not require urgent action.
Pattern type: General information notice
Recommended background: lec-primary-light
Recommended border: lec-primary left accent
Recommended use: Service reminders, office updates, general cooperative notices, and informational page callouts.
Warning Notice
This notice style is used for important warnings, deadline reminders, billing notices, or service-related information that members should review carefully.
Pattern type: Warning notice
Recommended background: lec-background
Recommended border: Recommended border: lec-warning full border with 6px left accent
Recommended use: Billing reminders, deadline notices, service warnings, policy reminders, and important member instructions.
Outage / Emergency Notice
This notice style is used for urgent service information, outage updates, emergency notices, or other high-priority messages members need to see quickly.
Pattern type: High-priority outage or emergency notice
Recommended background: lec-background
Recommended border: lec-alert-dark full border with 6px left accent
Recommended use: Outage updates, emergency service notices, urgent safety information, and high-priority cooperative alerts.
Success / Confirmation Notice
This notice style is used for successful actions, completed submissions, confirmations, and positive status messages.
Pattern type: Success or confirmation notice
Recommended background: lec-secondary-light
Recommended border: lec-success left accent
Recommended use: Form confirmations, successful submissions, completed actions, payment confirmations, and positive member status messages.
Content Sections and Page Patterns
Use these patterns to build consistent page layouts across the site. These examples define common content sections, two-column layouts, feature rows, and calls to action that can be reused on member-facing pages.
Standard Content Section
This pattern is used for a basic single-column page section with a heading, supporting text, and clear spacing. It works well for general page content that does not need cards, columns, or a call to action.
Pattern type: Standard single-column content section
Recommended background: lec-background
Recommended border: lec-primary left accent
Recommended use: General page sections, explanatory content, service information, and member-facing page copy.
Two Column Content Section
This pattern is used when a page needs a main content area with related supporting information beside it. It works well for service pages, program information, billing explanations, and member resources.
Pattern type: Two-column content section
Recommended background: lec-background
Recommended border: lec-primary left accent
Recommended use: Pages that need primary copy paired with supporting details, reminders, links, or short reference information.
Supporting Content
Use this area for short details, related links, contact notes, reminders, or a small callout that supports the main content.
Mobile behavior: Stack the sidebar below the main content.
Feature Card
Use this card for a short service highlight, member resource, or important page link.
Pattern type: Feature card
Recommended use: Service highlights, quick links, member resources, and short page summaries.
Feature Card with Detail
Use this variation when a card needs a little more explanatory text while still staying brief and scannable.
Pattern type: Feature card
Recommended use: Program summaries, service explanations, and resource previews.
Feature Card with Action
Use this variation when the card introduces an action, link, or next step for members.
Pattern type: Feature card
Recommended use: Quick actions, account tasks, contact prompts, and page navigation.
CTA Section
This pattern is used when a page needs a high-emphasis message with a clear next step. It works well for important service prompts, member actions, billing reminders, and contact-focused sections.
Pattern type: High-emphasis call-to-action section
Recommended background: lec-primary-dark
Recommended text color: lec-text-on-dark
Recommended button style: LEC Secondary Button
Recommended use: Important member actions, contact prompts, billing actions, outage-related directions, and page-level calls to action.
Soft Support CTA
This pattern is used when a page needs a helpful next step without the high emphasis of a dark call-to-action section.
Pattern type: Low-emphasis support call-to-action
Recommended background: lec-background-soft
Recommended text color: lec-text-muted
Recommended button style: LEC Primary Button or LEC Text Link Button
Recommended use: Helpful next steps, support prompts, related service links, and non-urgent member actions.
Two Column CTA
This pattern is used when a page needs supporting text beside a clear member action. It works well for service prompts, contact guidance, payment help, and account-related next steps.
Pattern type: Two column call-to-action section
Recommended background: lec-background-soft
Recommended accent: lec-primary left border
Recommended text color: lec-text-muted
Recommended button style: LEC Primary Button
Recommended use: Service pages, contact prompts, payment guidance, account support, outage resources, and pages where members need a clear next step.
Layout notes: Use two columns on desktop with supporting text on the left and the action content on the right.
Mobile behavior: Stack columns on phone with the main message first and the action second.
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.