Version 2.5.1
Theme(s) loaded [1]
  • smartgear2
  • Component(s) loaded [25]
  • Dashboard
  • Sampler
  • Documentation
  • Factory
  • AccordionFW
  • BlockStd
  • BlockCard
  • BlockEditable
  • BtnLoad
  • Datepicker
  • Filters
  • Goto
  • HeaderFW
  • HeroFW
  • InputNumber
  • InputRange
  • ModalFW
  • Pricecard
  • Select2FW
  • Sidepanel
  • SliderFW
  • SplitForm
  • TableList
  • SimplePie
  • Tabs
  • Debug mode false
    Toastr true
    - global -
    • spacing :2em
    • primary :#0075bf
    • secondary :#111414
    • success :#5cb85c
    • info :#0075bf
    • warning :#ffe000
    • error :#ec2c2c
    • radius :2px
    • border-default-size :1px
    • border-default-color :#000
    • enable-bg :true
    • enable-bd :true
    • input-as-btn :true
    • button-as-btn :true
    • track-color :rgba(0,117,191,.2)
    • filll-color :rgba(0,117,191,.5)
    - colors -
    • blue :#0075bf
    • green :#5cb85c
    • red :#ec2c2c
    • yellow :#ffe000
    • black :#000
    • blacklight :#111414
    • blacklighter :#222
    • greystronger :#424041
    • greystrong :#535052
    • grey :#7a7778
    • greylight :#ddd
    • greylighter :#eee
    • white :#fff
    • none :transparent
    - body -
    • background :#f5fbff
    • block-background :#fafdff
    • font-color :#111414
    • font-size :18px
    • font-size-sm :16px
    • font-size-xxs :14px
    • line-height :1.45
    - header -
    • background :#fff
    • font-color :#111414
    • font-size :18px
    - footer -
    • background :#fff
    • font-color :#111414
    • font-size :18px
    - input -
    • background :#fff
    • font-color :#424041
    • border-color :#ddd
    • border-size :1px
    • placeholder-font-color :#7a7778
    • radius :false
    - input-focus -
    • background :#fff
    • font-color :#424041
    • border-color :#7a7778
    - link -
    • font-color :#0075bf
    • font-color-hover :#0075bf
    • font-color-focus :#0075bf
    • underline :false
    • underline-on-hover :true
    - btn -
    • background :#0075bf
    • font-color :#fff
    • border-size :1px
    • radius :true
    • uppercase :false
    • font-weight :300
    - breakpoints -
    • xl :1400px
    • lg :1200px
    • md :992px
    • sm :768px
    • xs :576px
    • xxs :400px
    - container -
    • xl :1140px
    • lg :960px
    • md :960px
    • sm :720px
    • xs :540px
    • xxs :100%

    Framway commands

    npm run framway
    npm run framway displayConfig
    Displays framway's current config (themes and components)
    npm run framway init Initialize framway's structure and folders. Automatically download themes and components set in config file. Set the framway in a production state
    npm run framway update Pull the latest framway changes, update dependencies and listed components/themes

    Theme commands

    npm run theme [name]
    npm run theme [name] create [createGit]
    Create a theme folder with placeholder files. name is required.
    createGit is a boolean defining if we want to create a git repository (or not) to the current user registered account (default false)
    npm run theme [name] delete Remove the theme folder. Copy to the user clipboard a command to delete the theme's git repository if wanted.
    npm run theme [name] get Install an existing theme from the current user's git account. If already installed, the theme is updated, replacing all not committed changes

    Component commands

    npm run component [name]
    npm run component [name] create [createGit]
    Create a component folder with placeholder files. name is required.
    createGit is a boolean defining if we want to create a git repository (or not) to the current user registered account (default false)
    npm run component [name] delete Remove the component folder. Copy to the user clipboard a command to delete the component's git repository if wanted.
    npm run component [name] get Install an existing component from the current user's git account. If already installed, the component is updated, replacing all not committed changes
    The following presents a bunch of available utility classes, that you can use on any html element.
    Some of them make use of the !important css flag, identified by this symbol:
    Use these classes with caution.

    Fonts

    Weights
    • ft-thin: thin
    • ft-extralightft-lighter: extra light
    • ft-lightft-l: light
    • ft-normalft-n: normal
    • ft-medium: medium
    • ft-semibold: semibold
    • ft-boldft-b: bold
    • ft-extraboldft-bolder: extra bold
    Styles & transformations
    • ft-i: italic
    • ft-u: underline
    • ft-u-no: no underline
    • ft-upper: Uppercase
    • ft-lower: LOWERCASE
    • ft-notrs: No transformation
    • ft-nowrap: single line text
    Sizes
    ft-[0-10]{-[1-9]}-em|rem

    Examples:
    ft-2-rem for a 2rem font size
    ft-1-2-em for a 1.2em font size
    Colors
    ft-color

    Examples:
    ft-primary ft-blue ft-error, etc...

    Widths

    • w-100: 100% width
    • w-75 : 75% width
    • w-66 : 66% width
    • w-50 : 50% width
    • w-33 : 33% width
    • w-25 : 25% width
    • w-15 : 15% width
    • w-full: full screen width
    • w-fit: fitting content width
    • w-auto: width auto

    Miscs

    • no-events: forbid click events
    • no-transition: nullify existing transition
    • hidden: hide element
    • hidden-[breakpoint]: hide element at a specific breakpoint
    • ellipsis: apply ellipsis to the element's text
    • center: center an element
    • center-block: center an element and display as block
    • overflow-[hidden|visible|auto]: set element's overflow property
    • txt-[left|center|right]: set element's text alignment
    • fl-[left|right]: float left/right
    • clear-[left|right]
    • clear: clear left and right
    • clear-[after|before]: append a clearing element after/before
    • pos-relative: set element's position to relative

    Radius

    • rounded: apply default radius to all side of element
    • rounded-[top|bottom|left|right]: apply default radius to the related side
    • rounded-0: remove radius from element
    • rounded-circle: change the element's radius so it get a circular shape
    • rounded-pill: change the element's radius so it get a pill shape

    Syntax

    m|p-side-modifier

    Example

    m-top-x2

    Rules

    • Margins & paddings default value is set in the framway's config, from the spacing var.
    • Those utility classes use the !important css flag. We assume you know what you're doing.
    • m|p is replaced by m for margin, or p for padding.
    • side is replaced by the side's keyword where we want to apply a margin/padding.
      Those keywords are: top, bottom, left, right.
      Aliases can be used to group multiple sides at the same time:
      • all : means the margin/padding will be applied on all ellement's sides
      • x : means the margin/padding will be applied on left and right
      • y : means the margin/padding will be applied on top and bottom
      Examples : m-x p-all
    • -modifier is an optionnal keyword which changes the margins & paddings values.
      • -x2 will double the default value (spacing*2 )
      • -x3 will triple the default value (spacing*3 )
      • -x4 will quadruple the default value (spacing*4 )
      • -0 will force a margin/padding to 0
      • -auto will force a margin/padding to auto (works only for margins)
      • -1em will force a margin/padding to 1em
      Examples : m-top-x2 p-all-0

    Syntax

    bg-color

    Example

    bg-primary

    Notes

    • Backgrounded elements have a default padding set by the spacing config var. To nullify or change this, use the padding classes.

    Syntax

    bd-side-color-size

    Example

    bd-primary

    Rules

    • bd can be used alone, and give a border to its element, with default size and color set in framway's configuration (border-default-size & border-default-color)
    • Each modifier can be used or skipped, but should always be in the correct order.
      bd-bottom-primary-5 [correct]
      lorem ipsum
      bd-bottom-5 [correct]
      lorem ipsum
      bd-5-primary-bottom [wrong]
      lorem ipsum

    Notes

    • Bordered elements have a default padding set by the spacing config var. To nullify or change this, use the padding classes.

    Syntax

    opa-value

    Example

    opa-5

    Rules

    • value is a number between 0 and 9, corresponding to the css property value of opacity (value/10 )
      Example: opa-5 will set the element's opacity to 0.5, opa-9 to 0.9, opa-0 to 0, etc...

    Syntax

    flex -valueofbooleanlikeproperty-propertyname--propertyvalue...

    Example

    flex-wrap-justifycontent--center-alignitems--flexend

    Rules

    • Each property name or value has to be normalized: lowercase, no space, no - or _
      Example: justify-content become justifycontent, flex-start become flexstart, etc...
    • Properties which are boolean-like (flex-wrap, flex-direction, ..) are directly specified by their values.
      Example: flex-wrap-column, flex-nowrap-row
    • flex-grow property applied on container affect all children.
      Example: flex-flexgrow--1 mean all the children's flex-grow is set to 1.
    • Children's related property can be set individually on them, with the same syntax but without the flex- prefix, like this : flexchildproperty--number
      Examples: flexgrow--1, alignself--flexend
    Disclaimer
    The following makes use of the css grid properties, and thus may or may not fail in old browsers.

    Syntax

    d-grid cols-numberColumns rows-numberRows...

    Example

    d-grid cols-3 rows-3

    Rules

    • Grid's columns and rows are defined by the cols- and rows- classes. If none of them are defined, the grid has one column and infinite rows by default.
      Example: d-grid cols-3, d-grid rows-5, d-grid cols-3 rows-5
    • Defining a number of rows will add as much rows as expected, which mean that if you're requesting 3 rows, but fill up only 2, the 3rd will be there, empty.
      On another side, if you request 3 rows and fill them up all, any subsequent row will be added with no constraint.
      Example: d-grid cols-2 rows-3
      Empty space
      Empty space
      or
      Subsequent item
      Subsequent item
    • Cols and rows can be defined responsively, by adding classes like this:
      cols|rows-breakpoint-numberColumns|numberRows
      Example: d-grid cols-3 cols-md-2 cols-sm-1 (resize your viewport to see in action)
    • You can tell to grid items to span across cols and/or rows, by adding them classes like this:
      cols|rows-span-numberColumns|numberRows
      Note that rows spanning works better when a number of rows is defined.
      Example: d-grid cols-3 d-grid cols-3 rows-4
      cols-span-2
      rows-span-3
      rows-span-2 cols-span-2
    • Grid items order can be changed regarless of their position in the html grid, by adding a class to them:
      cols-order-[0-12]
      Order can also be changed responsively:
      cols-order-breakpoint-[0-12]
    • Grid gap value is spacing by default, but can be changed by adding a gap class to the container:
      gap-[0-6]{-em|rem}

    Syntax

    r_ratioValue fit--fittingValue img--position

    Example

    Click on any sample on this page to copy its html code to clipboard
    img alone default
    img alone 1:1
    img alone 4:3
    img alone 16:9
    img alone 2:1
    img-container default
    img-container 1:1
    img-container 4:3
    img-container 16:9
    img-container 2:1

    Rules

    • img elements can be wrapped in an element with the img-container class. By default this class gets 100% of the parent's width. This can be countered by adding a width utility class. Use w-fit class so the container fits the img natural width.
    • To apply a specific ratio to the picture, add a ratio class to the img or img-container:
      • r_16-9
      • r_2-1
      • r_1-1
      • r_1-2
      • r_4-3
    • You may set a ratio that differ from the image natural ratio. The default fitting behaviour in this case is to scale down the image if needed, meaning its size will be reduced until every side of it can fit in its box. This also mean that if the image is smaller than the container, it will keep its natural size. example:
      picture is bigger than the container, so it is reduced until it fit
      picture is way smaller than the container, so it stay at natural size
    • You may want to remove the grey borders on images not fitting their containers. This can be achieved by adding a no-bg class:
      Without no-bg
      With no-bg
    • By default, pictures and img-container will have an object-fit css property set to scale-down. To change this, add a fitting class:
      fit--cover|contain|scaledown|unset|none
      Natural
      With fit--contain
      With fit--cover
    • When using fit--cover class, the picture is truncated to fill the box.By default, pictures are centered in their container. You can alter the picture positionning by adding a vertical and/or an horizontal position class:
      img--top|center|bottom img--left|center|right
      A square image set to fit--cover in a 16:9 container
      Same image, with img--top
      Same image, with img--bottom
    • Pictures can be rounded by adding the rounded-circle class to the container. Be aware that this will force a 1:1 ratio on the picture, so the best practice is to use a square image, or set a fit--cover:
      Natural
      With fit--contain
      With fit--cover
      Natural, wrap in img-container
      With fit--contain
      With fit--cover
    • grayscale class add a basic grey filter to the picture
    • You can define basic effects on hover, by adding an effect class:
      • zoominzoomout (only works on a img-container wrapper)
      • fadetocolorfadetogrey

    Syntax

    btn -size
    btn -style-color

    Example

    btn-sm btn-bg-primary

    Rules

    • The minimum requirement to create a button element is the btn class. Any html element can become a button, but it's recommended to use links and inputs for accessibility purposes.

      Example:
      <a class="btn"></a>
      or
      <input type="button" class="btn">
    • html buttons and inputs (submit or button type) get the button styling by default. This mean there is no need to had them the btn class. To exclude specific buttons or inputs, had them the exclude class, or any other excluding class setup in the framway's config (see dashboard config, btn section).

      Example:
      <button class="exclude"></button>
    • Button size can be customized by adding a -size suffix. This suffix can be sm for small, or lg for large.

      <a class="btn-sm">Lorem ipsum</a>

      Lorem ipsum
      <a class="btn">Lorem ipsum</a>

      Lorem ipsum
      <a class="btn-lg">Lorem ipsum</a>

      Lorem ipsum
    • Button style can be customized by adding a -style and a -color suffix. Current available styles are the following:

      • -bg : plain background (default style used for button styling)
      • -bd : transparent background and apparent borders on idle state. Colored background on hover/focus state
      <a class="btn-bg-secondary">Lorem ipsum</a>

      Lorem ipsum
      <a class="btn-bd-tertiary">Lorem ipsum</a>

      Lorem ipsum
    • To change style and size at the same time, you need to add two btn class with the corresponding suffixes.

      <a class="btn-sm btn-bg-secondary">Lorem ipsum</a>

      Lorem ipsum
      <a class="btn-lg btn-bd-tertiary">Lorem ipsum</a>

      Lorem ipsum
    • Icons - from the built in Font Awesome library, or any svg file - can be added to a button's text. It is then necessary to add an icon-position class to it. position can be either first or last and defined on which side the icon will be rendered, no matter its real position in button's html.

      <a class="btn icon-first">Lorem ipsum <i class="fa fa-arrow-left"></i></a>

      Lorem ipsum
      <a class="btn icon-last">Lorem ipsum <i class="fa fa-arrow-right"></i></a>

      Lorem ipsum
    • Button's padding can be equalized, by adding the squared class. This is usefull in some case, like a button with icon but no text.

      <a class="btn-sm squared">Lorem ipsum</a>

      Lorem ipsum
      <a class="btn squared">Lorem ipsum</a>

      Lorem ipsum
      <a class="btn-lg squared">Lorem ipsum</a>

      Lorem ipsum
      <a class="btn-sm squared"><i class="fa fa-search"></i></a>

      <a class="btn squared"><i class="fa fa-search"></i></a>

      <a class="btn-lg squared"><i class="fa fa-search"></i></a>

    • Buttons base paddings (horizontal and vertical) can be changed in any framway theme by changing the value of the following vars:

      • btn-p-y (default 0.5em)
      • btn-p-x (default 1.5em)

    Sass mixins and custom functions are used in sass files to help on developing your features. While functions gets a classical use (calling their name followed by parenthesis containing - or not - various parameters), Mixins are quite different. They must be precided with the keyword @include, like this: @include mixinName([parameters])
    They usually compile large and complex css instructions into a simple call, and are being directly inserted in the css selector the instruction is written in.

    Functions

    • str-replace($string, $search, $replace: '')
    • contrastFW($color1, $color2)

      Algorithm searching for the best contrast between color1 and color2, by recursively altering color1 until a satisfying constrast is found. It finally return the altered result of color1.
      Be aware that this could lead to important alterations of the base color. For example, comparing a dark blue on black will could net you a bright white where there is not so much left of the original blue.

    Mixins

    • media-max($breakpoint){[style]}

      Write css into a media query acting below the breakpoint provided. breakpoint must be an alias used in the breakpoints config array.

    • media-min($breakpoint){[style]}

      Write css into a media query acting above the breakpoint provided. breakpoint must be an alias used in the breakpoints config array.

    • media-mm($breakpointMin,$breakpointMax){[style]}

      Write css into a media query acting between breakpointMin and breakpointMax. breakpointMin and breakpointMax must be an alias used in the breakpoints config array.

    • linear-grad($colorsMap,$direction : 'to right')

      Elaborate a linear gradient background from a provided color map. Example of a color map:
      (
          (green,5%,0.75),
          (#E6E6E6,50%,0.05),
          ($primary,110%,0.2),
      )

    • ellipsis()

      Apply an ellipsis text overflow on a single line of text

    • multi-ellipsis($font-size: 1em, $line-height: 1, $lines-to-show: 1)

      Apply an ellipsis text overflow on multiple lines of text, defined by the parameters provided

    • lastChildNoMargin()

      Apply a margin-bottom: 0; on the direct last child of the current element

    How it works

    ModalFW are lightboxes with many usages, built with html, css and javascript.
    They can be added directly to the DOM with html, or created with javascript calls.

    They are fixed on top of everything, centered horizontally and vertically.
    Clicking on the close button or the backdrop will close it.
    Opening a modal will close all other modals.

    Any content can be displayed in them, from simple text to complex page layout running javascript.
    Since they are scrollable, it's possible to add very long content.

    Basic usages

    The most basic requirement to create a modal is a div with the modalFW class, and a data-name attribute.
    This data-name must be unique in order to create a new modal.
    A button or any dom element can be used to trigger the modal opening by setting a data-modal attribute, with the correspondingdata-name as value.

    <button data-modal="sampleModal">Open</button>
    <div class="modalFW" data-name="sampleModal">
      <p>
        Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
      </p>
      <button data-modal="sampleModal_2">Open</button>
    </div>

    Alternatively, modals can be created jut from a trigger filled with attributes (see the paramaters section for details). The data-content attribute is required in this case.

    <button data-modal="sampleModal_2" data-content="Modal created from a trigger :)">Open</button>

    Modals can also be created from a javascript object, allowing more options and usages, with callbacks and events (see the paramaters section for details).

    <script>
      $(function(){
        var modalScript = new app.ModalFW({
          name : 'sampleModal_3',
          content: 'Modal created from a javascript object :)'
        });
      });
    </script>
    <button data-modal="sampleModal_3">Open</button>

    Galleries

    Multiple modals can be linked together, allowing navigation between them. This is done by adding a same data-gallery attribute (see Parameters) to the modals you want to link.

    Multiple galleries can live in the same page.

    <button data-modal="sampleModal_4" data-gallery="sampleGallery" data-content="Modal's content 1">Modal 1</button>
    <button data-modal="sampleModal_5" data-gallery="sampleGallery" data-content="Modal's content 2">Modal 2</button>
    <button data-modal="sampleModal_6" data-gallery="sampleGallery" data-content="Modal's content 3">Modal 3</button>

    Parameters

    Modals accept some parameters, allowing you more control over their behavior and customization.
    However, some of them are not available for all contruction methods listed above.
    The table below describe this parameters and their possible values, as well as their availability.
    Take note that the syntax here is the one used for the javascript object declaration. To be used in html structure, you must prefix them with data-.

    Param Value(s) Description Availability
    HTML Trigger Javascript
    name String Name of the modal. Mandatory. Should be unique to create a new one. Yes Yes Yes
    content String / HTML / jQuery Content displayed in the modal.
    Required unless url is provided.
    In a raw html structure, content is not required, since content is the html inside the .modalFW div.
    No Yes Yes
    url String Url of an external content to display in the modal. If this content is an image, the modal will take a borderless aspect.
    If url is provided, content will be ignored.
    Yes Yes Yes
    selector String jQuery selector of a specific part to retrieve in a requested page.
    Ignored if url is not provided.
    Yes Yes Yes
    removeEl String jQuery selector of element(s) to remove in a requested page.
    Ignored if url is not provided.
    Yes
    data-removeel
    Yes
    data-removeel
    Yes
    title String Add a title to the modal's header Yes Yes Yes
    width String Force the width of the modal. However, it will never exceed the width of the document. Yes Yes Yes
    container String
    (default "body")
    Jquery selector of the modal's direct parent Yes Yes Yes
    gallery String Gallery name, used to group multiple modals and allowing navigation between them Yes Yes Yes
    blnAutoload Bool
    (default true)
    Define if the modal will load its content when created or not.
    If set to false, the content will only be loaded when opening the modal.
    Yes
    data-autoload
    Yes
    data-autoload
    Yes
    blnOpen Bool
    (default false)
    Define if the modal automatically opens when created. Yes
    data-open
    Yes
    data-open
    Yes
    blnRefresh Bool
    (default false)
    Add a button to the modal's header. Allow the modal's content to be refreshed Yes
    data-refresh
    Yes
    data-refresh
    Yes
    blnDismiss Bool
    (default true)
    Allow the modal to be closed by clicking on the backdrop Yes
    data-dismiss
    Yes
    data-dismiss
    Yes
    blnAutodestroy Bool
    (default false)
    Automatically destroy the modal when closing it Yes
    data-autodestroy
    Yes
    data-autodestroy
    Yes
    buttons Object

    {
      buttonName : {
          label   : 'buttonLabel',
          classes : 'buttonClasses',
          action  :  fnButton,
          url     : 'urlButton'
      },
      ...
    }
    Add any number of buttons to the modal's footer.
    If label is not defined, buttonName will be used instead.
    classes accept a string of classes, added to the button.
    action is the callback fired when the button is clicked.
    If url is provided, the button become a link leading to the url when clicked
    No No Yes
    onOpen Function Add a callback executed when the modal is opened No No Yes
    onClose Function Add a callback executed when the modal is closed No No Yes
    onRefresh Function Add a callback executed when the modal is refreshed No No Yes

    Methods

    Modals dispose of methods allowing to manually act on them. To use them, you must have access to the modal Object.
    If you created the modal with a javascript call, you already have the Object, but if you created it with html, you can get it with jQuery, like this:

    var modalObject = $(modalSelector).modalFW('get');

    Method Description
    open() Open the modal
    close() Close the modal
    refresh() Refresh the modal's content
    destroy() Destroy the modal Object and the dom element

    This is a sample page

    This is a sample page for guideline purposes. you will find here most of the classical and default web elements at your disposal for designing your website, rendered according to the current framway's configuration.

    Lorem ipsum dolor sit met - h2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ipsa tenetur totam eos maiores suscipit quibusdam sint ipsum asperiores voluptates nulla nam, consectetur a nihil deserunt assumenda harum esse velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In provident nobis ipsum mollitia, et reiciendis maiores, placeat, ipsam exercitationem sapiente sit dolor voluptatum possimus maxime voluptatibus, ratione deleniti. Architecto, delectus?

    Lorem ipsum dolor sit amet - h5

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ipsa tenetur totam eos maiores suscipit quibusdam sint ipsum asperiores voluptates nulla nam, consectetur a nihil deserunt assumenda harum esse velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In provident nobis ipsum mollitia, et reiciendis maiores, placeat, ipsam exercitationem sapiente sit dolor voluptatum possimus maxime voluptatibus, ratione deleniti. Architecto, delectus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam qui reiciendis, quisquam quam, impedit ducimus laboriosam, ullam ipsam ipsum sed, possimus tempore? Sapiente adipisci porro possimus neque, cum inventore optio.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ipsa tenetur totam eos maiores suscipit quibusdam sint ipsum asperiores voluptates nulla nam, consectetur a nihil deserunt assumenda harum esse velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In provident nobis ipsum mollitia, et reiciendis maiores, placeat, ipsam exercitationem sapiente sit dolor voluptatum possimus maxime voluptatibus, ratione deleniti. Architecto, delectus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam qui reiciendis, quisquam quam, impedit ducimus laboriosam, ullam ipsam ipsum sed, possimus tempore? Sapiente adipisci porro possimus neque, cum inventore optio.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit
    • Lorem ipsum dolor sit amet
    • consectetur adipisicing elit
    • Animi eius facilis
    • Lorem ipsum dolor sit amet
    • consectetur adipisicing elit
    • Animi eius facilis
    1. Lorem ipsum dolor sit amet
    2. consectetur adipisicing elit
    3. Animi eius facilis
    1. Lorem ipsum dolor sit amet
    2. consectetur adipisicing elit
    3. Animi eius facilis
    Lorem Ipsum Dolor Sit
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum

    lorem ipsum dolor sit amet (H4)

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) - txt-center

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) - txt-right

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
      • Lorem ipsum dolor sit amet
      • Lorem ipsum dolor sit amet
        • Lorem ipsum dolor sit amet
        • Lorem ipsum dolor sit amet
      • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    1. Lorem ipsum dolor sit amet
    2. Lorem ipsum dolor sit amet
    3. Lorem ipsum dolor sit amet
      1. Lorem ipsum dolor sit amet
      2. Lorem ipsum dolor sit amet
        1. Lorem ipsum dolor sit amet
        2. Lorem ipsum dolor sit amet
      3. Lorem ipsum dolor sit amet
    4. Lorem ipsum dolor sit amet

    lorem ipsum dolor sit amet (H4) bg-blue

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-green

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-red

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-yellow

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-black

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-blacklight

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-blacklighter

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-greystronger

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-greystrong

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-grey

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-greylight

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-greylighter

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-white

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bg-none

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-blue

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-green

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-red

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-yellow

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-black

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-blacklight

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-blacklighter

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-greystronger

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-greystrong

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-grey

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-greylight

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-greylighter

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-white

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H4) bd-none

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    lorem ipsum dolor sit amet (H1)

    lorem ipsum dolor sit amet (H2)

    lorem ipsum dolor sit amet (H3)

    lorem ipsum dolor sit amet (H4)

    lorem ipsum dolor sit amet (H5)
    lorem ipsum dolor sit amet (H6)

    lorem ipsum dolor sit amet (H1) bg-blue

    lorem ipsum dolor sit amet (H2) bg-blue

    lorem ipsum dolor sit amet (H3) bg-blue

    lorem ipsum dolor sit amet (H4) bg-blue

    lorem ipsum dolor sit amet (H5) bg-blue
    lorem ipsum dolor sit amet (H6) bg-blue

    lorem ipsum dolor sit amet (H1) bg-green

    lorem ipsum dolor sit amet (H2) bg-green

    lorem ipsum dolor sit amet (H3) bg-green

    lorem ipsum dolor sit amet (H4) bg-green

    lorem ipsum dolor sit amet (H5) bg-green
    lorem ipsum dolor sit amet (H6) bg-green

    lorem ipsum dolor sit amet (H1) bg-red

    lorem ipsum dolor sit amet (H2) bg-red

    lorem ipsum dolor sit amet (H3) bg-red

    lorem ipsum dolor sit amet (H4) bg-red

    lorem ipsum dolor sit amet (H5) bg-red
    lorem ipsum dolor sit amet (H6) bg-red

    lorem ipsum dolor sit amet (H1) bg-yellow

    lorem ipsum dolor sit amet (H2) bg-yellow

    lorem ipsum dolor sit amet (H3) bg-yellow

    lorem ipsum dolor sit amet (H4) bg-yellow

    lorem ipsum dolor sit amet (H5) bg-yellow
    lorem ipsum dolor sit amet (H6) bg-yellow

    lorem ipsum dolor sit amet (H1) bg-black

    lorem ipsum dolor sit amet (H2) bg-black

    lorem ipsum dolor sit amet (H3) bg-black

    lorem ipsum dolor sit amet (H4) bg-black

    lorem ipsum dolor sit amet (H5) bg-black
    lorem ipsum dolor sit amet (H6) bg-black

    lorem ipsum dolor sit amet (H1) bg-blacklight

    lorem ipsum dolor sit amet (H2) bg-blacklight

    lorem ipsum dolor sit amet (H3) bg-blacklight

    lorem ipsum dolor sit amet (H4) bg-blacklight

    lorem ipsum dolor sit amet (H5) bg-blacklight
    lorem ipsum dolor sit amet (H6) bg-blacklight

    lorem ipsum dolor sit amet (H1) bg-blacklighter

    lorem ipsum dolor sit amet (H2) bg-blacklighter

    lorem ipsum dolor sit amet (H3) bg-blacklighter

    lorem ipsum dolor sit amet (H4) bg-blacklighter

    lorem ipsum dolor sit amet (H5) bg-blacklighter
    lorem ipsum dolor sit amet (H6) bg-blacklighter

    lorem ipsum dolor sit amet (H1) bg-greystronger

    lorem ipsum dolor sit amet (H2) bg-greystronger

    lorem ipsum dolor sit amet (H3) bg-greystronger

    lorem ipsum dolor sit amet (H4) bg-greystronger

    lorem ipsum dolor sit amet (H5) bg-greystronger
    lorem ipsum dolor sit amet (H6) bg-greystronger

    lorem ipsum dolor sit amet (H1) bg-greystrong

    lorem ipsum dolor sit amet (H2) bg-greystrong

    lorem ipsum dolor sit amet (H3) bg-greystrong

    lorem ipsum dolor sit amet (H4) bg-greystrong

    lorem ipsum dolor sit amet (H5) bg-greystrong
    lorem ipsum dolor sit amet (H6) bg-greystrong

    lorem ipsum dolor sit amet (H1) bg-grey

    lorem ipsum dolor sit amet (H2) bg-grey

    lorem ipsum dolor sit amet (H3) bg-grey

    lorem ipsum dolor sit amet (H4) bg-grey

    lorem ipsum dolor sit amet (H5) bg-grey
    lorem ipsum dolor sit amet (H6) bg-grey

    lorem ipsum dolor sit amet (H1) bg-greylight

    lorem ipsum dolor sit amet (H2) bg-greylight

    lorem ipsum dolor sit amet (H3) bg-greylight

    lorem ipsum dolor sit amet (H4) bg-greylight

    lorem ipsum dolor sit amet (H5) bg-greylight
    lorem ipsum dolor sit amet (H6) bg-greylight

    lorem ipsum dolor sit amet (H1) bg-greylighter

    lorem ipsum dolor sit amet (H2) bg-greylighter

    lorem ipsum dolor sit amet (H3) bg-greylighter

    lorem ipsum dolor sit amet (H4) bg-greylighter

    lorem ipsum dolor sit amet (H5) bg-greylighter
    lorem ipsum dolor sit amet (H6) bg-greylighter

    lorem ipsum dolor sit amet (H1) bg-white

    lorem ipsum dolor sit amet (H2) bg-white

    lorem ipsum dolor sit amet (H3) bg-white

    lorem ipsum dolor sit amet (H4) bg-white

    lorem ipsum dolor sit amet (H5) bg-white
    lorem ipsum dolor sit amet (H6) bg-white

    lorem ipsum dolor sit amet (H1) bg-none

    lorem ipsum dolor sit amet (H2) bg-none

    lorem ipsum dolor sit amet (H3) bg-none

    lorem ipsum dolor sit amet (H4) bg-none

    lorem ipsum dolor sit amet (H5) bg-none
    lorem ipsum dolor sit amet (H6) bg-none

    lorem ipsum dolor sit amet (H1) sep-top

    lorem ipsum dolor sit amet (H2) sep-top

    lorem ipsum dolor sit amet (H3) sep-top

    lorem ipsum dolor sit amet (H4) sep-top

    lorem ipsum dolor sit amet (H5) sep-top
    lorem ipsum dolor sit amet (H6) sep-top

    lorem ipsum dolor sit amet (H1) sep-bottom

    lorem ipsum dolor sit amet (H2) sep-bottom

    lorem ipsum dolor sit amet (H3) sep-bottom

    lorem ipsum dolor sit amet (H4) sep-bottom

    lorem ipsum dolor sit amet (H5) sep-bottom
    lorem ipsum dolor sit amet (H6) sep-bottom

    lorem ipsum dolor sit amet (H1) sep-left

    lorem ipsum dolor sit amet (H2) sep-left

    lorem ipsum dolor sit amet (H3) sep-left

    lorem ipsum dolor sit amet (H4) sep-left

    lorem ipsum dolor sit amet (H5) sep-left
    lorem ipsum dolor sit amet (H6) sep-left

    lorem ipsum dolor sit amet (H1) sep-right

    lorem ipsum dolor sit amet (H2) sep-right

    lorem ipsum dolor sit amet (H3) sep-right

    lorem ipsum dolor sit amet (H4) sep-right

    lorem ipsum dolor sit amet (H5) sep-right
    lorem ipsum dolor sit amet (H6) sep-right

    lorem ipsum dolor sit amet (H2) sep-top sep-bottom

    lorem ipsum dolor (H2) sep-left sep-right

         
         
         
    * input type button or submit




























    With icons



    Input groups



    Input groups + .form-shrink



    +
    -
    - todo: script récupération et affichage valeur sélectionnée
    bg-blue
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-green
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-red
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-yellow
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-black
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-blacklight
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-blacklighter
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-greystronger
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-greystrong
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-grey
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-greylight
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-greylighter
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-white
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown
    bg-none
    - todo: script récupération et affichage valeur sélectionnée
    - todo: custom script dropdown

    .bg-blue

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-green

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-red

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-yellow

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-black

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-blacklight

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-blacklighter

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-greystronger

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-greystrong

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-grey

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-greylight

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-greylighter

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-white

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bg-none

    Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    .bd
    Lorem ipsum dolor sit amet
    .bd-top
    Lorem ipsum dolor sit amet
    .bd-bottom
    Lorem ipsum dolor sit amet
    .bd-left
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    .bd-right
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    .bd-left.bd-top-green
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    .bd-right.bd-bottom-green
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    .bd-10.bd-grey-left-5.bd-bottom-red.bd-right-green-2
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet - bd-blue
    Lorem ipsum dolor sit amet - bd-green
    Lorem ipsum dolor sit amet - bd-red
    Lorem ipsum dolor sit amet - bd-yellow
    Lorem ipsum dolor sit amet - bd-black
    Lorem ipsum dolor sit amet - bd-blacklight
    Lorem ipsum dolor sit amet - bd-blacklighter
    Lorem ipsum dolor sit amet - bd-greystronger
    Lorem ipsum dolor sit amet - bd-greystrong
    Lorem ipsum dolor sit amet - bd-grey
    Lorem ipsum dolor sit amet - bd-greylight
    Lorem ipsum dolor sit amet - bd-greylighter
    Lorem ipsum dolor sit amet - bd-white
    Lorem ipsum dolor sit amet - bd-none
    Accordion title

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    Accordion title (locked)

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    Accordion title

    Zombies reversus ab inferno, This is a link nam malum cerebro. De carne This is a disabled link animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.

    Misc

    Deploy all items at start (default to false)
    Disable the items collapsibility (default to false)
    Collapse every other items when deploying one (default to false)
    AccordionFW [v1.1.0]
    Created 2.0.0
    Updated 2.5.1
    CSS class accordionFW
    Notes

    Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.

    Modal created from a trigger :)
    Modal's content 1
    Modal's content 2
    Modal's content 3
    Modal created from a javascript object :)