Colors

primary #1cbac9

light #dafbff

dark #006868

orange #ffb721

fluo #74fff7

Logo

Adjust size with height and width of .logo-svg.

logo AnySurfer

Typography

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Bodytext is Open Sans via Google fonts. start text deletedHeadings are "Ubuntu".end text deleted Headings are Montserrat.

Font size enlarged to 16px.

Make a paragraph stand out by adding .lead.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Panel

Jihaaa, I'm in the panel!


Well

I'm doing well.


Labels

Default Primary Success Info Warning Danger
niet van toepassing oké niet oké

Buttons


Pagination

class="pagination pagination-lg"

class="pagination"

class="pagination pagination-sm"


Pager


Screenshot

Use .img-thumbnail for dotted border.

tweetdeck sreenshot


Code

Activate syntax higlighter with class="language-markup" (for html), class="language-css" or class="language-javascript" on <code> element.

<h1>This is code</h1>

Lorem ipsum dolor sit amet, Inline code <h1> <h2> <h3>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


List


Panel

Panel title

Panel content

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Table

Use .table for basic styling and .table-striped for zebra-striping. Use a parent <div> with .table-responsive for horizontal scrolling on mobile.

Success Criteria WebAIM's Recommendations
1.2.1 Prerecorded Audio-only and Video-only
(Level A)
  • A descriptive text transcript (including all relevant visual and auditory clues and indicators) is provided for non-live, web-based audio (audio podcasts, MP3 files, etc.).
  • A text or audio description is provided for non-live, web-based video-only (e.g., video that has no audio track).
1.2.2 Captions (Prerecorded)
(Level A)
  • Synchronized captions are provided for non-live, web-based video (YouTube videos, etc.)
1.2.3 Audio Description or Media Alternative (Prerecorded)
(Level A)
1.2.4 Captions (Live)
(Level AA)
  • Synchronized captions are provided for all live multimedia that contains audio (audio-only broadcasts, web casts, video conferences, Flash animations, etc.)
1.2.5 Audio Description (Prerecorded)
(Level AA)
  • Audio descriptions are provided for all video content
    NOTE: Only required if the video conveys content visually that is not available in the default audio track.
1.2.6 Sign Language (Prerecorded)
(Level AAA)
  • A sign language video is provided for all media content that contains audio.
1.2.7 Extended Audio Description (Prerecorded)
(Level AAA)
  • When an audio description track cannot be added to video due to audio timing (e.g., no pauses in the audio), an alternative version of the video with pauses that allow audio descriptions is provided.
1.2.8 Media Alternative (Prerecorded)
(Level AAA)
  • A descriptive text transcript is provided for all pre-recorded media that has a video track.
1.2.9 Audio-only (Live)
(Level AAA)
  • A descriptive text transcript (e.g., the script of the live audio) is provided for all live content that has audio.