FLUID

Submission:

Northwest Bank / #109870870

Account Name

Northwest Bank, Inc.

Broker Name

Marsh Company, Inc.

Policy Term

01/01/2024 - 01/01/2025

FLUID Rich Text Editor

FLUID Divider

FLUID Text

Text Overflow: Wrap

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur atque aut, corporis delectus deleniti deserunt dicta distinctio dolorum eos et ex expedita facere id ipsam laboriosam libero magnam maiores maxime nobis numquam odio optio pariatur, perferendis quia quo recusandae rem sed suscipit ut vitae voluptas voluptate voluptates. Explicabo nam omnis repellat ullam!

Text Overflow: Clip

Accusantium amet aperiam, at beatae blanditiis commodi cumque dolores ducimus eaque eum exercitationem expedita illum iste maiores natus nemo perspiciatis quam quidem, repellendus, rerum sunt temporibus ullam vero. Adipisci aliquam aliquid, blanditiis commodi dolorum eius ipsa ipsam iste maiores nam officia possimus, provident quae qui quidem quo reprehenderit repudiandae similique sit tempore velit voluptatem voluptatibus?

Text Overflow: Ellipsis

A at blanditiis cum id nam nemo neque veritatis, voluptatum? Alias aliquid animi atque aut autem blanditiis consequatur cupiditate debitis doloribus est eveniet ex excepturi fuga fugiat illum impedit ipsa nesciunt nisi, perferendis placeat porro quae quasi quidem rem repudiandae sit tenetur vel velit, voluptate voluptates! Accusamus adipisci alias amet corporis culpa delectus dolorum excepturi expedita hic, id inventore, ipsa ipsam laudantium molestiae mollitia nisi nulla numquam odio omnis qui quo reiciendis sapiente sed tempore ullam vero voluptatibus. Ab ad architecto assumenda consequatur deserunt dolor earum, eligendi esse exercitationem facilis fuga fugiat in iste minima nobis obcaecati odit, optio placeat praesentium quasi quis repellendus repudiandae sapiente tempora velit. Aliquid assumenda consequuntur dignissimos dolorem exercitationem ipsa iusto magnam, neque obcaecati perspiciatis, quam quidem quis quisquam ratione vitae!

FLUID Text: Inline

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Quam quidem quis quisquam ratione vitae!

FLUID Text: alignSuper

E = mc

FLUID Link

Default FLUID Link

Router Link

Email Link

Telephone Link

Inline Link

FLUID Link w/ File Download

Link w/ No URL Provided

Link That Opens New Tab

FLUID Link w/ Icon (Slot)

FLUID Link w/ iconBefore (Prop)

FLUID Link w/ iconAfter (Prop)

Jump Link (Default)

Jump Link (Smooth Scroll)

Attribute Tunnel Test

Disabled Link

Link w/ Centered Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae blanditiis culpa cumque dignissimos, dolore doloribus ea eos illo illum ipsa ipsam nam non nostrum officia quasi sapiente sequi vero vitae voluptates. Accusantium amet labore maxime minima, modi nemo neque, praesentium, quaerat quisquam quod reiciendis rerum sequi veniam veritatis voluptatum.

List of Links 1

List of Links 2

List of Links 3

List of Links 4

Link w/ Dark colorScheme

Link w/ Light colorScheme

Popover Icon

Testing Icon color inheritance when Popover present

Context Menu

Dropdown Button

Modal

Focus Trap

Button Group

Default Button Group

Button Group w/ Tile Buttons

Button Group w/ Icons

Button Group w/ Icons (Deprecated)

Button Group w/ Observable

2.5 second delay on option change

Icon - with iconKey

Modal Tree Menu POC

Badges

Chips

Chips with Slotted iconBefore

Chips with Slotted iconAfter

Chips with @Prop iconBefore

Chips with @Prop iconAfter

Container

FLUID Container!

This Popover can be used to illustrate the truncation effects of setting "overflowX" & "overflowY" Props on the Container

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate auctor accumsan. Proin erat mauris, commodo nec erat eget, dignissim vestibulum odio. Vivamus quis tempor nisl. Donec a pharetra ex, nec consectetur libero. Pellentesque lacinia facilisis suscipit. Maecenas sed erat pretium, egestas diam vitae, molestie leo. Cras rhoncus, eros at rhoncus fringilla, magna sem laoreet nibh, non pretium nibh orci a augue. Pellentesque a metus sed quam ullamcorper malesuada blandit in ante. Aliquam id odio ligula. Nunc ultrices dapibus neque, vel pulvinar nisi tristique ac. Aliquam sit amet augue faucibus, pellentesque erat at, euismod odio. In hendrerit ultricies quam in venenatis.

Phasellus porttitor orci vel quam lobortis, et blandit est scelerisque. Nulla sit amet nisi volutpat justo volutpat fermentum nec quis quam. Aenean blandit libero vitae elementum porta. Vivamus fringilla, dui ac tempus consequat, justo nulla ullamcorper sapien, in efficitur purus urna at est. Praesent a dolor sed eros luctus blandit sit amet vel lorem. Cras dignissim efficitur purus eget rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate auctor accumsan. Proin erat mauris, commodo nec erat eget, dignissim vestibulum odio. Vivamus quis tempor nisl. Donec a pharetra ex, nec consectetur libero. Pellentesque lacinia facilisis suscipit.

Maecenas sed erat pretium, egestas diam vitae, molestie leo. Cras rhoncus, eros at rhoncus fringilla, magna sem laoreet nibh, non pretium nibh orci a augue. Pellentesque a metus sed quam ullamcorper malesuada blandit in ante. Aliquam id odio ligula. Nunc ultrices dapibus neque, vel pulvinar nisi tristique ac. Aliquam sit amet augue faucibus, pellentesque erat at, euismod odio. In hendrerit ultricies quam in venenatis. Praesent faucibus fermentum venenatis. Donec suscipit eros risus, ut luctus tellus venenatis ac. Vestibulum suscipit massa non magna placerat, non sodales sapien congue. Phasellus porttitor orci vel quam lobortis, et blandit est scelerisque. Nulla sit amet nisi volutpat justo volutpat fermentum nec quis quam. Aenean blandit libero vitae elementum porta.

Form Elements

Combo Box

Select

Text Area

Input Field

Currency Field

Datepicker

Toggle

Toggle Group

Toggle Group + "Toggle All"

Horizontal Toggle Group

Non-Checkbox Toggle Group

Radio Group

File Upload

FLUID Title

The title goes here!

Text Area

Breadcrumb

(Linked to left Sidebar Tree Menu - click a menu item to update trail)

Icon Behavior

Icon w/ animateIcon enabled

Icon w/ regular hoverOver

Icon w/ popover

Drawer

FLUID Drawer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias esse eum fugit illo molestias nulla odit officiis qui unde voluptatibus! Architecto culpa doloribus eos labore maiores perspiciatis, quae unde vitae. Adipisci aliquam at corporis dolor doloribus eaque earum eligendi, eos excepturi expedita inventore magnam magni non, officia pariatur qui sapiente sequi sit soluta suscipit tenetur ut voluptatem. A, ab ad animi architecto atque consectetur cumque cupiditate doloribus enim esse, et facere hic in ipsa ipsam iste magni maiores maxime minus molestias mollitia neque nostrum numquam odio pariatur possimus praesentium qui reiciendis rerum sapiente sed similique totam velit veniam vero voluptatibus voluptatum. Aliquid, dolor fugiat laborum perspiciatis soluta velit?

A at blanditiis consequuntur cupiditate ipsa molestias nemo, nihil non pariatur quae, repudiandae tenetur veniam? Atque explicabo ipsum quasi repellat. Ab aliquid earum expedita impedit in iste mollitia voluptatum? Accusantium aliquid aspernatur aut beatae corporis cum deserunt distinctio ea error eum eveniet excepturi explicabo fuga fugiat itaque iure iusto mollitia nesciunt placeat possimus quibusdam quod reiciendis sapiente, sunt tempore veritatis voluptate! A animi assumenda consectetur debitis dignissimos dolores enim hic, iste laborum laudantium mollitia neque nihil obcaecati officia placeat quaerat quam repellat repudiandae, sit soluta unde veniam veritatis vitae voluptas voluptatem? Ab accusantium ad, consequatur dicta doloremque ducimus eligendi explicabo libero magni modi nesciunt nulla perferendis suscipit voluptatem voluptates. Alias consequatur deserunt eligendi eos eveniet in incidunt laboriosam obcaecati odio perspiciatis quis reiciendis reprehenderit, temporibus voluptatem voluptates. Aliquam asperiores, aspernatur consectetur consequatur debitis dolor doloribus ex exercitationem facere, id molestias nam necessitatibus nesciunt non quasi quos recusandae, rerum sed vero voluptates. Assumenda dolores necessitatibus nisi quia recusandae!

Accusantium minima minus porro soluta. Accusantium aliquam aliquid asperiores at atque autem dolore dolorem ducimus eaque exercitationem facilis fugit harum, in ipsum itaque iusto labore magnam minima minus molestias mollitia neque nulla officia placeat quibusdam recusandae saepe sequi similique voluptate voluptatem. Commodi dignissimos dolorum facere fugiat magni numquam, pariatur perspiciatis reprehenderit. Accusamus deserunt dignissimos dolore ea eum iste iure omnis possimus repellat ut? Error id ratione sed vero. A corporis cupiditate eveniet impedit quia ratione rem vitae? Aliquid, animi commodi consequatur, culpa dignissimos est exercitationem iure libero minus saepe sint tempore ullam, unde voluptas voluptate! Adipisci corporis dignissimos dolorem doloribus dolorum ducimus eaque earum eius esse, et eveniet id impedit incidunt iure libero molestiae nemo neque nobis nulla odio officia officiis pariatur perferendis possimus quasi qui rem repellat tempora temporibus voluptas! Cumque ea, enim fuga inventore nam nisi nostrum officia quam quia reiciendis, rerum saepe voluptas voluptates.

Ab accusamus amet animi architecto atque corporis cum dolor eaque, eligendi esse et ex excepturi expedita explicabo facere fugiat harum laudantium libero magnam modi nesciunt nisi nulla numquam odit officia officiis, omnis perferendis perspiciatis placeat quam, quas ratione repellat rerum saepe similique sunt totam. A accusantium ad architecto at consectetur debitis, ea fugiat ipsum iste laborum necessitatibus nobis perspiciatis possimus, quis recusandae rem sunt tempore vel voluptate voluptatem. Ab, accusantium, animi aperiam debitis deleniti fuga fugiat id ipsa ipsum molestiae, non possimus quos ratione. Animi ea eum magnam!

Tabs

Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi at cumque cupiditate dicta esse et, harum in minus nostrum obcaecati perspiciatis quaerat quas quia quo rerum, sint ullam ut, vero! Aliquam deleniti earum eligendi et impedit incidunt, iusto laboriosam neque odio, perspiciatis quibusdam quisquam, quo quos reprehenderit sed tempora voluptate voluptatibus? At atque consequuntur culpa cum dolorem enim est, eveniet neque nesciunt nihil obcaecati, officiis quod soluta sunt temporibus tenetur, veritatis voluptatem! Magnam, molestias voluptates.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi aperiam asperiores, consectetur consequatur debitis enim facere fuga laboriosam libero minima minus odit provident, quae tempore voluptas voluptatum. Adipisci illo iste nihil omnis. Accusamus eos explicabo incidunt minima odit tenetur, veritatis? Ex, nostrum, quis? At delectus eius, eum inventore, molestias nesciunt nisi nobis, officia quas quo similique suscipit tenetur voluptate voluptates voluptatibus! Dicta distinctio dolorum ducimus ea fugiat ipsam ipsum temporibus tenetur ullam, vel voluptas.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam asperiores commodi doloremque ducimus excepturi fuga fugiat fugit hic id illum, labore molestias nam perferendis, recusandae repellendus saepe sunt ullam unde voluptate, voluptatibus? A alias consectetur consequuntur, culpa debitis dolores eaque enim excepturi explicabo fuga fugit impedit in iusto nam natus nobis pariatur quaerat quam quibusdam recusandae repudiandae sint sunt tempore ut velit veniam veritatis. Ab ad animi deleniti earum eius esse mollitia optio pariatur reiciendis.

Tab 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda autem consectetur debitis dolore doloremque doloribus error et, excepturi natus, placeat quas recusandae repellat saepe sequi soluta, ut. Adipisci aut autem dolore explicabo harum id itaque labore, mollitia odit quo rem repellat repellendus repudiandae sint velit, veritatis voluptate. Animi aut esse ex exercitationem explicabo magni optio quos voluptatum. Adipisci animi autem culpa dolor, error iusto minima minus non officia praesentium qui quibusdam reiciendis, ut vitae.

Tab 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, laudantium quam quia quibusdam recusandae repudiandae tenetur. Accusantium aut autem blanditiis consectetur cum enim fugiat, incidunt porro rem reprehenderit sapiente ullam voluptate voluptatibus? A accusantium alias beatae commodi consequatur culpa delectus deleniti distinctio dolores dolorum eaque, error incidunt laudantium libero magnam nam nesciunt nihil odio, officia officiis pariatur perspiciatis placeat porro provident qui quisquam quo, sapiente sint tempora ullam. A alias architecto eaque neque nihil tenetur.

Tab 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet cumque hic itaque maxime optio quidem sint voluptates! Corporis distinctio facere, laboriosam minima nemo nisi quo sint sunt. A animi assumenda consectetur consequatur corporis eius eos et explicabo, id illo incidunt ipsum libero maiores natus nisi officiis quas quisquam recusandae repellat repellendus sed sit temporibus ullam velit voluptates. Laudantium natus neque quam. Aperiam architecto dolor exercitationem explicabo illo, illum impedit magni non, quidem vel voluptatum.

Tab 7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cupiditate dolorum eaque fugit, ipsum neque officiis porro quas suscipit tenetur. A accusantium alias amet cupiditate dolores, doloribus ea illum impedit in inventore ipsum, minus mollitia nam natus necessitatibus neque omnis, placeat rerum ullam velit? Consequuntur cum cumque dolore enim explicabo id ipsa iste laudantium natus nisi, odio praesentium qui quia quis rerum sed sit suscipit ullam vel veritatis. Beatae magnam molestiae nobis odio quae sed!

Tab 8

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aspernatur at consectetur corporis culpa dicta, dolorem eaque, expedita ipsa libero magnam maxime natus nobis obcaecati placeat quod ratione reiciendis sed similique soluta tempora ullam velit voluptates voluptatibus. Atque beatae corporis explicabo nemo sit. Atque deleniti dignissimos earum eos exercitationem fugit, id illo illum in iusto nulla officiis omnis quisquam quod quos temporibus vero! Corporis hic ipsa, maiores neque nesciunt odio rerum vero? Eos, totam?

Tabs with Icons

Tab with iconBefore @Prop

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu quam eros. Proin semper dolor mauris. Vestibulum nec sodales diam. Quisque in pulvinar ipsum. Praesent eget ipsum viverra, venenatis lacus non facilisis lorem. Duis non risus id nisl aliquet commodo quis in sapien.

Tab with iconAfter @Prop

Tab with Slotted iconBefore

Tab with Slotted iconAfter

Tab with Slotted iconAfter w/ Font Awesome

Tabs Overflow Scroll

Disabled Tabs

Carousel

Card One

Card Two

Card Three

Card Four

Loading Skeleton

Tour!

Progress Animations

Linear Progress (Determinate)

Linear Progress / Loading Spinner (Indeterminate)

Confirmation Dialog

Opportunity Header Example

NMG Test 01 Update2 - (1254995) - Customer

NEW YORK CITY SCHOOL CONSTRUCTION AUTHORITY - OCIP - (2004766) - Customer

TECHNICAL OIL MANUFACTURING CO - (169010) - Prospect

Fournier Wausau - (1255959) - Customer

Lorne Test ANC - (1255956) - Customer

12/31/2019 - 12/31/2020

ARTHUR J GALLAGHER & COMPANY (000177)

Table

Basic Table

Table - With Render Props

Paginator

Legacy Theme Paginator

LM Theme Paginator

LM Corporate Theme Paginator

Portal Theme Paginator

Paginator with First & Last Buttons

Grid

Responsive Grid

Sizes set with grid-item-cargo attribute

Pull Left / Right Grid Items

Grid Item: Pull Left

Grid Item

Grid Item: Pull Right

Grid with Large Grid Item Spacing

Grid Item

Center-Aligned Grid + Self-Aligned Grid Items

**align-self not set**

Header Actions

Ghost Buttons

Icon Buttons

Buttons

Legacy Theme Buttons

Disabled Buttons (Legacy)

Small Buttons (Legacy)

Large Buttons (Legacy)

LM Theme Buttons

Disabled Buttons (LM)

Small Buttons (LM)

Large Buttons (LM)

LM Corporate Theme Buttons

Disabled Buttons (Corp)

Small Buttons (Corp)

Large Buttons (Corp)

Portal Theme Buttons

Disabled Buttons (Corp)

Small Buttons (Corp)

Large Buttons (Corp)

Disabled Buttons - Disabled by non-false attribute

If disabled attribute is 'false', then don't disable - any other value on the attribute, and the button is disabled

Buttons with Icons

Slotted Icon-Only Buttons

slot="icon-self" Buttons

slot="icon-before" Buttons

slot="icon-after" Buttons

Buttons with Popovers

Control Bar Buttons

Alert

Legacy Theme Alerts

Inline Alerts (Legacy)

LM Theme Alerts

Inline Alerts (LM)

LM Corporate Theme Alerts

Inline Alerts (LM Corporate)

Portal Theme Alerts

Inline Alerts (Portal)

Alerts Populated Via "config" @Prop

Alert Timeout Example

Alert w/ Message Prop Mutation

Alert w/ Message via Slot

Here's a success alert with a message passed via slot!

Alert w/ Slotted FontAwesome Icon

Positioned Snackbars

Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, culpa magnam minima nam nulla quidem vitae. Error eveniet impedit iusto magnam modi odio perferendis placeat, quia quis ratione repellat sed temporibus ullam velit vitae? Accusamus accusantium aperiam, aspernatur blanditiis consectetur dicta doloremque dolorum inventore ipsa maiores maxime minima modi.

Nam optio possimus qui quis quod ratione reiciendis repudiandae soluta sunt suscipit ullam voluptate voluptatem? Aliquid aspernatur dolore et expedita explicabo impedit ipsa omnis vel. Ab assumenda corporis cum dicta, ducimus excepturi expedita harum id, iure labore libero modi nemo nihil non obcaecati officia perferendis quae quasi sunt tempore ut voluptas.

Expand/Collapse Behaviour

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend elit ac magna vestibulum, congue faucibus lectus volutpat. Pellentesque metus tellus, pretium ac leo non, pharetra facilisis orci. Curabitur vehicula libero odio, ut egestas eros auctor eu. Duis imperdiet rhoncus lacus sit amet ultricies. Nam at mi vel turpis vestibulum efficitur. Morbi posuere ac dolor in feugiat. Nam vel ante vulputate, cursus eros molestie, posuere enim. Fusce vel lobortis nulla. Nulla at pulvinar felis, a rhoncus arcu. Curabitur elementum leo molestie odio rutrum, sed feugiat justo tempus. Ut venenatis at sapien sed venenatis. Integer ac facilisis sem. Nullam risus urna, commodo non blandit eget, ultrices id risus. Aliquam nec neque laoreet, feugiat augue vel, tincidunt mi. Etiam vel metus et dolor commodo aliquet eget quis magna. In tristique ut ligula vitae pellentesque. Phasellus luctus eu libero ac tincidunt. In erat tellus, dictum nec magna quis, lacinia egestas arcu. Etiam ut suscipit arcu. Fusce malesuada, diam vestibulum tristique mattis, ligula nisi luctus risus, vitae fermentum felis ex consectetur odio. Integer posuere a est nec gravida. Sed vel dolor a erat sagittis commodo ac vel purus. Sed massa enim, aliquam sit amet quam id, cursus pellentesque dui.

Pie Chart

Bar Chart Example

Stacked Bar Chart

Line Chart Example

Footer

---- If you see this at the top of the page, then FLUID isn't loaded yet, and we're hiding the FLUID controlled content ----

Other Stuff!

Basic Table