Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Difference between revisions of "Main Page"
From apigateway.wmf
| Line 8: | Line 8: | ||
<p class="lead"> | <p class="lead"> | ||
<button type="button" class="btn btn-primary">Primary</button> | <button type="button" class="btn btn-primary">Primary</button> | ||
| − | <button type="button" class="btn btn-secondary">Secondary</button> | + | <button type="button" class="btn btn-secondary wm-bold">Secondary</button> |
<button type="button" class="btn btn-success">Success</button> | <button type="button" class="btn btn-success">Success</button> | ||
<button type="button" class="btn btn-danger">Danger</button> | <button type="button" class="btn btn-danger">Danger</button> | ||
| Line 17: | Line 17: | ||
</div> | </div> | ||
| + | <div class="wm-mainpage-content"> | ||
| + | <div class="container"> | ||
| + | <div class="row"> | ||
| + | <div class="col-sm"> | ||
| + | <div class="card"> | ||
| + | <div class="card-header"> | ||
| + | Featured | ||
| + | </div> | ||
| + | <div class="card-body"> | ||
| + | <h5 class="card-title">Special title treatment</h5> | ||
| + | <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> | ||
| + | <a href="#" class="btn btn-primary">Go somewhere</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-sm"> | ||
| + | <div class="card"> | ||
| + | <div class="card-body"> | ||
| + | <h5 class="card-title">Wikipedia articles</h5> | ||
| + | <p class="card-text">Get free, multilingual information from Wikipedia, including article metadata, history, and HTML.</p> | ||
| + | <a href="#" class="btn btn-link">Learn more</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-sm"> | ||
| + | <div class="card transparent text-center"> | ||
| + | <div class="card-body"> | ||
| + | <h5 class="card-title">Free images & media files</h5> | ||
| + | <p class="card-text">Build apps using free images, audio, and video from Wikimedia Commons.</p> | ||
| + | <a href="#" class="btn btn-link">Learn more</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="wm-mainpage-content"> | ||
| + | <ul class="nav nav-tabs" id="myTab" role="tablist"> | ||
| + | <li class="nav-item"> | ||
| + | <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> | ||
| + | </li> | ||
| + | <li class="nav-item"> | ||
| + | <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> | ||
| + | </li> | ||
| + | <li class="nav-item"> | ||
| + | <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> | ||
| + | </li> | ||
| + | </ul> | ||
| + | <div class="tab-content" id="myTabContent"> | ||
| + | <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> | ||
| + | <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> | ||
| + | <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> | ||
| + | </div> | ||
| + | </div> | ||
</html> | </html> | ||
Revision as of 09:30, 19 May 2020
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereWikipedia articles
Get free, multilingual information from Wikipedia, including article metadata, history, and HTML.
Learn moreFree images & media files
Build apps using free images, audio, and video from Wikimedia Commons.
Learn more...
...
...