<!DOCTYPE html>
< html lang = "en" dir = "ltr" >
< head >
< meta charset = "utf-8" >
< title > I2P Styleguide< / title >
< link rel = "stylesheet" href = "/i2p-styleguide/assets/static/open-iconic-bootstrap.css" / >
< link rel = "stylesheet" href = "/i2p-styleguide/assets/static/bootstrap.min.css" >
< link rel = "stylesheet" href = "/i2p-styleguide/assets/styles/main.css" >
< link rel = "shortcut icon" type = "image/png" href = "/i2p-styleguide/assets/images/favicon.png" / >
< link href = "/i2p-styleguide/assets/fonts/sourcesans.css" rel = "stylesheet" >
< link href = "/i2p-styleguide/assets/fonts/sourcecode.css" rel = "stylesheet" >
< link href = "/i2p-styleguide/assets/fonts/i2p.css" rel = "stylesheet" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< / head >
< body >
< nav class = "navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top" >
< a class = "navbar-brand" href = "https://geti2p.net/" >
< img src = "/i2p-styleguide/assets/images/horizontal_white.png" class = "my-2" height = "40" width = "auto" alt = "" > < / img >
< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse " id = "navbarSupportedContent" >
< ul class = "navbar-nav mr-auto display-xs" >
< li class = "nav-item" >
< a class = "nav-link" href = "/i2p-styleguide/" > About< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/i2p-styleguide/getting-started" > Getting Started< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/i2p-styleguide/design/" > Design< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/i2p-styleguide/components/" > Components< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/i2p-styleguide/copywriting/" > Copywriting< / a >
< / li >
< / ul >
< / div >
< / nav >
< div class = "row" >
< div class = "col-md-3 hidden-sm p-0" >
< div class = "row" style = "height: 100%" >
< div class = "col-md-6 col-sm-16 col-xs-12 p-0" >
< div class = "sidebar rb-sidebar__1" id = "sidebar1" >
< ul id = "sidebar-left" class = "col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill" >
< a href = "/i2p-styleguide/" class = "sidebar__link__light" >
< li class = "list-group-item rb-main-sidebar" > About< / li >
< / a >
< a href = "/i2p-styleguide/getting-started/" class = "sidebar__link__light" >
< li class = "list-group-item rb-main-sidebar" > Getting Started< / li >
< / a >
< a href = "/i2p-styleguide/design/" class = "sidebar__link__light" >
< li class = "list-group-item rb-main-sidebar" > Design< / li >
< / a >
< a href = "/i2p-styleguide/components/" class = "sidebar__link__light" >
< li class = "list-group-item rb-main-sidebar" > Components< / li >
< / a >
< a href = "/i2p-styleguide/copywriting/" class = "sidebar__link__light" >
< li class = "list-group-item rb-main-sidebar" > Copywriting< / li >
< / a >
< / ul >
< / div >
< / div >
< div class = "col-md-6 col-sm-12 col-xs-3 p-0" >
< div class = "sidebar border-left-right rb-sidebar__2" id = "sidebar" style = "border-color: $oc-gray-1;" >
< ul class = "p-0 list-group pt-3 sidebar-fill" >
< a class = "sidebar__link__light" href = "#alerts" > < li class = "list-group-item rb-sidebar" >
Alerts
< / li > < / a >
< a class = "sidebar__link__light" href = "#badges" > < li class = "list-group-item rb-sidebar" >
Badges
< / li > < / a >
< a class = "sidebar__link__light" href = "#buttons" > < li class = "list-group-item rb-sidebar" >
Buttons
< / li > < / a >
< a class = "sidebar__link__light" href = "#cards" > < li class = "list-group-item rb-sidebar" >
Cards
< / li > < / a >
< a class = "sidebar__link__light" href = "#footer" > < li class = "list-group-item rb-sidebar" >
Footer
< / li > < / a >
< a class = "sidebar__link__light" href = "#forms" > < li class = "list-group-item rb-sidebar" >
Forms
< / li > < / a >
< a class = "sidebar__link__light" href = "#header" > < li class = "list-group-item rb-sidebar" >
Header
< / li > < / a >
< / ul >
< / div >
< / div >
< / div >
< / div >
< div class = "col-lg-9 pt-3 pl-5" >
<!-- <p>This is the components page</p>
-->
< div class = "component-wrapper my-5" id = "" >
< div class = "page-header mb-4" >
< h2 id = "alerts" > Alerts< / h2 >
< p class = "text-muted" > Some Description about alerts.< / p >
< / div >
< div class = "row p-5 bg-light" >
< div class = "col-12 alert alert-primary" role = "alert" >
< p class = "mb-0" > This is a primary alert — check it out!< / p >
< / div >
< div class = "col-12 alert alert-secondary" role = "alert" >
< p class = "mb-0" > This is a default alert — check it out!< / p >
< / div >
< div class = "col-12 alert alert-success" role = "alert" >
< p class = "mb-0" > This is a success alert — check it out!< / p >
< / div >
< div class = "col-12 alert alert-warning" role = "alert" >
< p class = "mb-0" > This is a warning alert — check it out!< / p >
< / div >
< div class = "col-12 alert alert-danger" role = "alert" >
< p class = "mb-0" > This is a danger alert — check it out!< / p >
< / div >
< div class = "col-12 alert alert-success" role = "alert" >
< h4 class = "alert-header" > Well done!!< / h4 >
< p > Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.< / p >
< hr >
< p class = "mb-0" > Also some extra text and a < a href = "#alerts" class = "alert-link" > link< / a > .< / p >
< / div >
< / div >
< / div >
< div class = "component-wrapper my-5" id = "" >
< div class = "page-header mb-4" >
< h2 id = "badges" > Badges< / h2 >
<!-- p class="text - muted">Some Description about badges.</p -->
< / div >
< div class = "row p-5 bg-light" >
< div class = "col-12" >
< h2 > Example heading < span class = "badge badge-primary" > New< / span > < / h2 >
< / div >
< div class = "col-12" >
< h4 class = "pt-4" > Example heading < span class = "badge badge-secondary" > New< / span > < / h4 >
< / div >
< div class = "col-12" >
< h6 class = "pt-4" > Example heading < span class = "badge-pill badge-primary" > New< / span > < / h6 >
< / div >
< / div >
< / div >
< div class = "component-wrapper my-5" id = "" >
< div id = "buttons" class = "mb-4" >
< h2 > Buttons< / h2 >
<!-- p class="text - muted">Some Description about buttons.</p -->
< / div >
< div class = "row bg-light p-5" >
< div class = "col-xs-12 col-sm-6 col-md-6 p-1" >
< p class = "text-black small text-muted m-0 pb-2" > Primary< / p >
< button type = "button" class = "btn btn-lg btn-primary btn-pill mr-2" > Primary< / button >
< p class = "text-black small text-muted m-0 pt-2 pb-2" > Ghost< / p >
< button type = "button" class = "btn btn-lg btn-outline-primary btn-pill mr-2" > How to Contribute< / button >
< p class = "text-black small text-muted m-0 pt-2" > Link< / p >
< button type = "button" class = "btn btn-lg btn-link mr-2" > Learn more< / button >
< / div >
< div class = "col-xs-12 col-sm-6 col-md-6 p-1" >
< p class = "text-black small text-muted m-0 pt-2 pb-2" > Medium< / p >
< button type = "button" class = "btn btn-medium btn-pill mr-2" > Medium< / button >
< button type = "button" class = "btn btn-outline-medium btn-pill mr-2" > Ghost< / button >
< button type = "button" class = "btn btn-link mr-2" > Link< / button >
< p class = "text-black small text-muted m-0 pt-2 pb-2" > Small< / p >
< button type = "button" class = "btn btn-sm btn-small btn-pill mr-2" > Small< / button >
< button type = "button" class = "btn btn-sm btn-outline-small btn-pill mr-2" > Ghost< / button >
< button type = "button" class = "btn btn-sm btn-link mr-2" > Link< / button >
< p class = "text-black small text-muted m-0 pt-5" > Scroller< / p >
< button type = "button" class = "btn btn-scroller mr-2 mt-2" > Back to Top < svg version = "1.1" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px" viewBox = "0 0 149 256.1" class = "faq__chevron-up" > < path d = "M145.4,136.5l-117.8,116c-4.7,4.7-12.3,4.7-17,0l-7.1-7.1c-4.7-4.7-4.7-12.3,0-17L105.8,128L3.6,27.6c-4.7-4.7-4.7-12.3,0-17l7.1-7.1c4.7-4.7,12.3-4.7,17,0l117.8,116C150.1,124.2,150.1,131.8,145.4,136.5L145.4,136.5z" > < / path > < / svg > < / button >
< / div >
< / div >
< / div >
< div class = "component-wrapper my-5" id = "" >
< div class = "mb-4" id = "cards" >
< h2 > Cards< / h2 >
< div class = "row bg-light p-md-5 p-sm-3 pt-5 pb-5" >
< div class = "col-md-6 col-sm-12 col-xs-12" >
< div class = "card mb-2" >
< div class = "card-body" >
< h4 class = "card-title" > I2P< / h4 >
< p class = "card-text text-muted" > I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.< / p >
< a href = "#" class = "btn btn-medium btn-pill" onclick = "return false;" > Visit website< / a >
< / div >
< / div >
< div class = "card mb-2" >
< div class = "card-body" >
< h4 class = "card-title" > I2P< / h4 >
< p class = "card-text text-muted" > I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.< / p >
< a href = "#" class = "rb-link" onclick = "return false;" > Apply< / a >
< / div >
< / div >
< div class = "card" >
< div class = "card-body" >
< h4 class = "card-title" > I2P< / h4 >
< p class = "card-text text-muted" > I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.< / p >
< / div >
< / div >
< / div >
< div class = "col-md-6 col-sm-12 col-xs-12" >
< div class = "card" >
< img class = "card-img-top"
src="/i2p-styleguide/assets/images/placeholder.jpg" alt="Card image cap">
< div class = "card-body" >
< h4 class = "card-title" > A few things everyone can do now< / h4 >
< p class = "card-text text-muted" > Numerous people contribute to the project to varying extents.< / p >
< / div >
< ul class = "list-group list-group-flush" >
< li class = "list-group-item" > Consider < a href = "#" class = "rb-link" onclick = "return false;" >
< mark > contributing< / mark >
< / a > to help the I2P project grow.
< / li >
< li class = "list-group-item" > Take a moment to
< mark > donate< / mark >
to support further development.
< / li >
< li class = "list-group-item" > Help
< mark > translate< / mark >
the documentation into < a href = "#" class = "rb-link" onclick = "return false;" > other languages< / a > .
< / li >
< / ul >
< div class = "card-body" >
< a href = "#" class = "rb-link" onclick = "return false;" > View All< / a >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "component-wrapper my-5" id = "" >
< div id = "footer" class = "page-header mb-4" >
< h3 > Footer< / h3 >
< / div >
< div class = "footer col-12 p-5 background-primary text-white" >
< div class = "footer__wrapper col-lg-11 col-md-12 mx-auto" >
< div class = "row" id = "footer-lists" >
< ul class = "col-lg-3 col-md-4 col-sm-6 col-xs-12" id = "footer-i2p-menu" >
< span > I2P< / span >
< li > < a href = "#" > About< / a > < / li >
< li > < a href = "#" > Blog< / a > < / li >
< li > < a href = "#" > events< / a > < / li >
< li > < a href = "#" > contact us< / a > < / li >
< / ul >
< ul class = "col-lg-3 col-md-4 col-sm-6 col-xs-12" id = "footer-gettingStarted-menu" >
< span > Getting started< / span >
< li > < a href = "#" > guides< / a > < / li >
< li > < a href = "#" > technology< / a > < / li >
< li > < a href = "#" > api< / a > < / li >
< li > < a href = "#" > docs< / a > < / li >
< / ul >
< ul class = "col-lg-3 col-md-4 col-sm-6 col-xs-12" id = "footer-getInvolved-menu" >
< span > get involved< / span >
< li > < a href = "#" > contribute< / a > < / li >
< li > < a href = "#" > donate< / a > < / li >
< li > < a href = "#" > partners< / a > < / li >
< / ul >
< ul class = "col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id = "footer-socialMedia-menu" >
< span > Follow us< / span >
< div class = "row footer__social-media" >
< li >
< svg
class="footer__social-media-icon"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
< use xlink:href = "../assets/images/feather-sprite.svg#github" / >
< / svg >
< / li >
< li >
< svg
class="footer__social-media-icon"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
< use xlink:href = "../assets/images/feather-sprite.svg#twitter" / >
< / svg >
< / li >
< li >
< svg
class="footer__social-media-icon"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
< use xlink:href = "../assets/images/feather-sprite.svg#slack" / >
< / svg >
< / li >
< / div >
< / ul >
< / div >
< div class = "spacer col-12" > < / div >
< div class = "footer-extras row" >
< div class = "footer-extras__logo col-md-6 col-sm-12" >
< img class = "mb-3" src = "https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class = "img-fluid" / >
< p > © 2018 The Invisible Internet Project< br / >
Content available under a Creative Commons license.< / p >
< / div >
< div class = "col-lg-4 col-sm-12" >
< ul class = "d-flex flex-wrap pl-0" >
< li > < a href = "#" > data policy< / a > < / li >
< li > < a href = "#" > legal< / a > < / li >
< li > < a href = "#" > sitemap< / a > < / li >
< li > < a href = "#" > ipressum< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "component-wrapper my-5" id = "" >
< div class = "page-header mb-4" id = "forms" >
< h2 > Forms< / h2 >
<!-- p class="text - muted">Some Description about Forms.</p -->
< / div >
< div class = "row" >
< form class = "bg-light p-5 col-sm-6" >
< div class = "form-group" >
< label for = "exampleInputEmail1" > Email address< / label >
< input type = "email" class = "form-control" id = "exampleInputEmail1" aria-describedby = "emailHelp" placeholder = "Enter email" >
< small id = "emailHelp" class = "form-text text-muted" > We'll never share your email with anyone else.< / small >
< / div >
< div class = "form-group" >
< label for = "exampleInputPassword1" > Password< / label >
< input type = "password" class = "form-control" id = "exampleInputPassword1" placeholder = "Password" >
< / div >
< div class = "form-check" >
< input type = "checkbox" class = "form-check-input" id = "check_me_out" >
< label for = "check_me_out" class = "form-check-label ml-2 mt-1" > Check me out< / label >
< / div >
< button type = "submit" class = "btn btn-medium btn-pill mt-4" onclick = "return false;" > Submit< / button >
< / form >
< / div >
< / div >
< div class = "component-wrapper my-5" id = "" >
< div id = "header" class = "mb-4" >
< h2 > Header< / h2 >
<!-- p class="text - muted">Some Description about buttons.</p -->
< / div >
< div class = "bg-light p-5" id = "" >
< nav class = "navbar navbar-expand-lg navbar-dark border-bottom align-items-end py-3" id = "styleguide-nav" " style = background: $ oc-white " >
< a class = "navbar-brand mr-5" href = "https://geti2p.net/" >
< img src = "/i2p-styleguide/assets/images/horizontal_white.png" class = "my-2" height = "40" width = "auto" alt = "" > < / img >
< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#SGnavSupportedContent" aria-controls = "SGnavSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "SGnavSupportedContent" >
< ul class = "navbar-nav mr-auto" >
< li class = "nav-item pb-2" >
< a class = "nav-link mx-1 text-capitalize font-weight-bold" href = "#" > Blog< / a >
< / li >
< li class = "nav-item pb-2" >
< a class = "nav-link mx-1 text-capitalize font-weight-bold" href = "#" > Getting started< / a >
< / li >
< li class = "nav-item pb-2" >
< a class = "nav-link mx-1 text-capitalize font-weight-bold" href = "#" > Docs & data< / a >
< / li >
< li class = "nav-item pb-2" >
< a class = "nav-link mx-1 text-capitalize font-weight-bold" href = "#" > Contribute< / a >
< / li >
< li class = "nav-item pb-2" >
< a class = "nav-link mx-1 text-capitalize font-weight-bold" href = "#" > About us< / a >
< / li >
< / ul >
< / div >
< / nav >
< / div >
< / div >
<!-- div class="component - wrapper my - 5" id="">
< div class = "mb-4" id = "jumbotron" >
< h2 > Jumbotron< / h2 >
< div class = "bg-light p-md-5 p-sm-3" >
< div class = "jumbotron bg-primary text-white" >
< div class = "container" >
< div class = "row" >
< div class = "col-sm-4 d-none d-sm-block" >
< img src = "../assets/images/jumbo.png" class = "img-fluid" / >
< / div >
< div class = "col-sm-8" >
< h1 class = "display-4" > Privacy in numbers< / h1 >
< p class = "lead" > Protect communication from dragnet surveillance and monitoring.< / p >
< hr class = "my-4" >
< a class = "btn btn-white btn-pill btn-lg" href = "#" role = "button" > Download I2P< / a >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div-- >
< div class = "component-wrapper my-5" id = "" >
< div class = "page-header mb-4 " id = "pagination" >
< h2 > Pagination< / h2 >
<!-- p class="text - muted">Some Description about pagination.</p -->
< / div >
< div class = "row bg-light p-5" >
< nav aria-label = "..." >
< ul class = "pagination m-0" >
< li class = "page-item disabled" >
< span class = "page-link" > Previous< / span >
< / li >
< li class = "page-item" > < a class = "page-link" href = "#" onclick = "return false;" > 1< / a > < / li >
< li class = "page-item" >
< span class = "page-link rb-paginate-active" >
2< span class = "sr-only" > (current)< / span >
< / span >
< / li >
< li class = "page-item" > < a class = "page-link" href = "#" onclick = "return false;" > 3< / a > < / li >
< li class = "page-item" >
< a class = "page-link" href = "#" onclick = "return false;" > Next< / a >
< / li >
< / ul >
< / nav >
< / div >
< / div >
< div class = "component-wrapper my-5" id = "" >
< div class = "page-header mb-4" id = "tables" >
< h2 > Tables< / h2 >
< / div >
< div class = "row bg-light p-5" >
< span > Default< / span >
< br / >
< table class = "table" >
< thead >
< tr >
< th scope = "col" > #< / th >
< th scope = "col" > First< / th >
< th scope = "col" > Last< / th >
< th scope = "col" > Handle< / th >
< / tr >
< / thead >
< tbody >
< tr >
< th scope = "row" > 1< / th >
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
< th scope = "row" > 2< / th >
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
< th scope = "row" > 3< / th >
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
< span > Striped< / span >
< br / >
< table class = "table table-striped" >
< thead >
< tr >
< th scope = "col" > #< / th >
< th scope = "col" > First< / th >
< th scope = "col" > Last< / th >
< th scope = "col" > Handle< / th >
< / tr >
< / thead >
< tbody >
< tr >
< th scope = "row" > 1< / th >
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
< th scope = "row" > 2< / th >
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
< th scope = "row" > 3< / th >
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
< div class = "page-header mb-4 mt-5 d-none d-sm-none" >
< h3 > Scrollspy< / h3 >
<!-- p class="text - muted">Some Description about scrollspy.</p -->
< / div >
< div class = "row p-0 pt-5 bg-light d-none d-sm-none" >
< div class = "bd-example" >
< div class = "row" >
< div class = "col-4" >
< div id = "list-example" class = "list-group" >
< a class = "list-group-item list-group-item-action active" href = "https://securedrop.org/" > SecureDrop< / a >
< a class = "list-group-item list-group-item-action" href = "#list-item-2" > Second Link< / a >
< a class = "list-group-item list-group-item-action" href = "#list-item-3" > Third Link< / a >
< a class = "list-group-item list-group-item-action" href = "#list-item-4" > Forth Link< / a >
< / div >
< / div >
< div class = "col-8" >
< div data-spy = "scroll" data-target = "#list-example" data-offset = "0" class = "scrollspy-example" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "dropdown-divider mt-5 wi" > < / div >
< div class = "row" >
< div class = "col-12 p-0" >
< p class = "mt-5 mb-5" >
< span class = "text-muted small" > Styleguide code licensed under < a href = "https://opensource.org/licenses/MIT" class = "rb-link" title = "MIT" target = "_blank" > MIT< / a > , documents licensed under a < a href = "https://creativecommons.org/licenses/by/3.0/us/" title = "CC 3.0" target = "_blank" > Creative Commons Attribution 3.0 United States License< / a > . I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.< br > Templates and styles based on the < a href = "https://reproducible-builds.org/style" target = "_blank" > Reproducible Builds styleguide< / a > .< / span >
< / p >
< / div >
< / div >
< / div >
< / div >
< script src = "/i2p-styleguide/assets/javascript/modernizr.min.js" > < / script >
< script src = "/i2p-styleguide/assets/javascript/jquery-3.3.1.slim.min.js" > < / script >
< script src = "/i2p-styleguide/assets/javascript/popper.min.js" > < / script >
< script src = "/i2p-styleguide/assets/javascript/bootstrap.min.js" > < / script >
<!-- <script src="/i2p - styleguide/assets/javascript/run_prettify.js"></script> /* -->
< script type = "text/javascript" src = "/i2p-styleguide/assets/javascript/index.js" > < / script >
< / body >
< / html >
