Komponenter

Nedan listas alla de komponenter som finns på afaförsakring.se tillsammans med en kort beskrivning på hur och var de ska användas.

Grid:

Media queries

Använd följande media queries för att nå olika devices

        
/* Extra small devices (phones, less than 768px) */
/* Ingen media query. Default i bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
        
    

Stackas ovanpå varandra mobilt

Med olika bredd i olika devices skärmbredder

Olika för mobil, tablet och desktop

Rubriker

Brödtext

Detta är ingresstexten. Lite fetare, lite skönare!

Once upon a midnight dreary, while I pondered weak and weary, Over many a quaint and curious volume of forgotten lore, While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. `'Tis some visitor,' I muttered, `tapping at my chamber door - Only this, and nothing more.'

Ah, distinctly I remember it was in the bleak December, And each separate dying ember wrought its ghost upon the floor. Eagerly I wished the morrow; - vainly I had sought to borrow From my books surcease of sorrow - sorrow for the lost Lenore - For the rare and radiant maiden whom the angels name Lenore - Nameless here for evermore.

This line of text is meant to be treated as deleted text. And the silken sad uncertain rustling of each purple curtain Thrilled me - filled me with fantastic terrors never felt before; This line of text is meant to be treated as no longer accurate. So that now, to still the beating of my heart, I stood repeating `'Tis some visitor entreating entrance at my chamber door - Some late visitor entreating entrance at my chamber door; - This it is, and nothing more,'

Presently my soul grew stronger; hesitating then no longer, `Sir,' said I, `or Madam, truly your forgiveness I implore; But the fact is I was napping, and so gently you came rapping, And so faintly you came tapping, tapping at my chamber door, That I scarce was sure I heard you' - here I opened wide the door; - Darkness there, and nothing more.

Deep into that darkness peering, long I stood there wondering, fearing, Doubting, dreaming dreams no mortal ever dared to dream before; But the silence was unbroken, and the darkness gave no token, And the only word there spoken was the whispered word, `Lenore!' This I whispered, and an echo murmured back the word, `Lenore!' Merely this and nothing more.

Back into the chamber turning, all my soul within me burning, Soon again I heard a tapping somewhat louder than before. `Surely,' said I, `surely that is something at my window lattice; Let me see then, what thereat is, and this mystery explore - Let my heart be still a moment and this mystery explore; - 'Tis the wind and nothing more!'

Open here I flung the shutter, when, with many a flirt and flutter, In there stepped a stately raven of the saintly days of yore. Not the least obeisance made he; not a minute stopped or stayed he; But, with mien of lord or lady, perched above my chamber door - Perched upon a bust of Pallas just above my chamber door - Perched, and sat, and nothing more.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Then this ebony bird beguiling my sad fancy into smiling, By the grave and stern decorum of the countenance it wore, `Though thy crest be shorn and shaven, thou,' I said, `art sure no craven. Ghastly grim and ancient raven wandering from the nightly shore - Tell me what thy lordly name is on the Night's Plutonian shore!' Quoth the raven, `Nevermore.'

Much I marvelled this ungainly fowl to hear discourse so plainly, Though its answer little meaning - little relevancy bore; For we cannot help agreeing that no living human being Ever yet was blessed with seeing bird above his chamber door - Bird or beast above the sculptured bust above his chamber door, With such name as `Nevermore.'

But the raven, sitting lonely on the placid bust, spoke only, That one word, as if his soul in that one word he did outpour. Nothing further then he uttered - not a feather then he fluttered - Till I scarcely more than muttered `Other friends have flown before - On the morrow he will leave me, as my hopes have flown before.' Then the bird said, `Nevermore.'

Detta är en fkn

Startled at the stillness broken by reply so aptly spoken, `Doubtless,' said I, `what it utters is its only stock and store, Caught from some unhappy master whom unmerciful disaster Followed fast and followed faster till his songs one burden bore - Till the dirges of his hope that melancholy burden bore Of "Never-nevermore."'

But the raven still beguiling all my sad soul into smiling, Straight I wheeled a cushioned seat in front of bird and bust and door; Then, upon the velvet sinking, I betook myself to linking Fancy unto fancy, thinking what this ominous bird of yore - What this grim, ungainly, ghastly, gaunt, and ominous bird of yore Meant in croaking `Nevermore.'

This I sat engaged in guessing, but no syllable expressing To the fowl whose fiery eyes now burned into my bosom's core; This and more I sat divining, with my head at ease reclining On the cushion's velvet lining that the lamp-light gloated o'er, But whose velvet violet lining with the lamp-light gloating o'er, She shall press, ah, nevermore!

Then, methought, the air grew denser, perfumed from an unseen censer Swung by Seraphim whose foot-falls tinkled on the tufted floor. `Wretch,' I cried, `thy God hath lent thee - by these angels he has sent thee Respite - respite and nepenthe from thy memories of Lenore! Quaff, oh quaff this kind nepenthe, and forget this lost Lenore!' Quoth the raven, `Nevermore.'

`Prophet!' said I, `thing of evil! - prophet still, if bird or devil! - Whether tempter sent, or whether tempest tossed thee here ashore, Desolate yet all undaunted, on this desert land enchanted - On this home by horror haunted - tell me truly, I implore - Is there - is there balm in Gilead? - tell me - tell me, I implore!' Quoth the raven, `Nevermore.'

`Prophet!' said I, `thing of evil! - prophet still, if bird or devil! By that Heaven that bends above us - by that God we both adore - Tell this soul with sorrow laden if, within the distant Aidenn, It shall clasp a sainted maiden whom the angels name Lenore - Clasp a rare and radiant maiden, whom the angels name Lenore?' Quoth the raven, `Nevermore.'

`Be that word our sign of parting, bird or fiend!' I shrieked upstarting - `Get thee back into the tempest and the Night's Plutonian shore! Leave no black plume as a token of that lie thy soul hath spoken! Leave my loneliness unbroken! - quit the bust above my door! Take thy beak from out my heart, and take thy form from off my door!' Quoth the raven, `Nevermore.'

And the raven, never flitting, still is sitting, still is sitting On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon's that is dreaming, And the lamp-light o'er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor Shall be lifted - nevermore!

Adresser

Citat

Success is not final, failure is not fatal: it is the courage to continue that counts.

I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.

Listor

Vanliga

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
   1. Phasellus iaculis neque
   2. Purus sodales ultricies
   3. Vestibulum laoreet porttitor sem
   4. Ac tristique libero volutpat at
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Ostilade

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Inline

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

Med markering

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

Beskrivningslistor

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Felis euismod semper eget lacinia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Kod

Inline

Här kommer en kodsnutt i texten <code> det blir snyggt.

Knappar

Här kommer lite knapptryckningar cd mitt it texten.
To edit settings, press ctrl + ,

Kodblock

<p>Lite kodexempel...</p><p>Skulle kunna fortsätta på hur många rader som helst. Det finns liksom inga begräsningar. Man kan göra precis vad man vill. Precis som i verkligheten!</p>

Variabler

Data output

Tabeller

Basic

Ange class="table"

Striped

Ange class="table table-striped"

Med border

Ange class="table table-bordered"

Med hover

Ange class="table table-hover"

Kondenserad

Ange class="table table-condensed"

Kontextuella rader och celler

Responsiva tabeller

Lägg tabellen i en div med class="table-responsive"

Formulär

Basic

Horisontellt formulär

Inputs

Textarea

Checkboxar och radiobuttons

Inline

Selects

Inaktiva kontroller

Validering

...med ikoner

Storlekar på inputkontroller

...horisontellt

Knappar

Olika typer

Storlekar

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button

Inaktiverade

Bilder

Responsivt

Form

Övriga hjälpklasser

Kontextuella färger

Responsivt dölja/visa

Färger

@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;

Ikoner

... i knappar

Dropdowns

... med rubriker

... med inaktiva element

Knappgrupper

...med flera parallela grupper

...med olika storlekar

...med dropdown

Vertikalt

Knapp-dropdowns

...med split

...med olika storlekar

Dropups också

Input grupper

...med olika storlekar

...med checkboxar och radiobuttons

...med knappar

...med dropdowns

...med knappar och dropdowns. Det är ingen hejd!

Navigering

Tabbar

• Home
• Profile
• Messages

Pills

• Home
• Profile
• Messages

• Home
• Profile
• Messages

...med dropdowner

• Home
• Help
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

• Home
• Help
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

Navigerings bar

Breadcrumbs

1. Home
2. Library
3. Data

Paginering

• «
• 1
• 2
• 3
• 4
• 5
• »

...med olika storlekar

Kondenserad - endast pager

• Previous
• Next

Labels

...med olika kontextuella färger

Badges

...i navigering

• 42 Home

Jumbotron

Thumbnails

...med custom content

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Alerts

... med stängknapp

... med länkar

Progress bars

Media grupper

Kan vara för lite olika typer av komponenter där man behöver en bild linjerat med innehåll etc.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Listgrupper

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

...med badges

• 14 Cras justo odio
• 34 Cras justo odio
• 19 Cras justo odio

...med länkar

...med kontextuella klasser

• Dapibus ac facilisis in
• Cras sit amet nibh libero
• Porta ac consectetur ac
• Vestibulum at eros

...med mer innehåll

Paneler

...med heading

...med footer

...med kontextuell färg

...med tabell

...med listgrupp

Wells

Responsiv embed

Responsiv embed finns normalt i två format, 16x9 och 4x3.

Modala fönster

Vi har modalfönster i tre olika storlekar:

• liten
• mellan
• stor

Tooltips

Popovers

Vi har också pop-overs som är som lite större tooltips...

Accordions

Karusell

Karuseller bör användas ytterst sparsmakat, om alls.

Hello?

Is it me you're looking for

Or is it me?

badabing badaboom

Or me?

Bazinga!