Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add pricing table component #149

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add pricing table component #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/css/bootstrap-theme.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/css/bootstrap-theme.min.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Bootstrap v5.13.1 (http://bootstrap.transferwise.com)
* Bootstrap v5.14.1 (http://bootstrap.transferwise.com)
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/transferwise/bootstrap/blob/master/LICENSE)
*/
120 changes: 119 additions & 1 deletion dist/css/bootstrap.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/css/bootstrap.css.map
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/css/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Bootstrap v5.13.1 (http://bootstrap.transferwise.com)
* Bootstrap v5.14.1 (http://bootstrap.transferwise.com)
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/transferwise/bootstrap/blob/master/LICENSE)
*/
Expand Down
2 changes: 1 addition & 1 deletion dist/js/bootstrap.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

156 changes: 148 additions & 8 deletions docs/_includes/css/tables.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ <h2 id="tables-example">Basic example</h2>
{% endhighlight %}


<h2 id="tables-striped">Striped rows</h2>
<h2 class="page-subheader" id="tables-striped">Striped rows</h2>
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
<div class="alert alert-danger" id="callout-tables-striped-ie8">
<h4>Cross-browser compatibility</h4>
Expand Down Expand Up @@ -88,7 +88,7 @@ <h4>Cross-browser compatibility</h4>
{% endhighlight %}


<h2 id="tables-bordered">Bordered table</h2>
<h2 class="page-subheader" id="tables-bordered">Bordered table</h2>
<p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
<div class="bs-example" data-example-id="bordered-table">
<table class="table table-bordered">
Expand Down Expand Up @@ -129,7 +129,7 @@ <h2 id="tables-bordered">Bordered table</h2>
{% endhighlight %}


<h2 id="tables-hover-rows">Hover rows</h2>
<h2 class="page-subheader" id="tables-hover-rows">Hover rows</h2>
<p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
<div class="bs-example" data-example-id="hoverable-table">
<table class="table table-hover">
Expand Down Expand Up @@ -170,7 +170,7 @@ <h2 id="tables-hover-rows">Hover rows</h2>
{% endhighlight %}


<h2 id="tables-condensed">Condensed table</h2>
<h2 class="page-subheader" id="tables-condensed">Condensed table</h2>
<p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
<div class="bs-example" data-example-id="condensed-table">
<table class="table table-condensed">
Expand Down Expand Up @@ -210,7 +210,7 @@ <h2 id="tables-condensed">Condensed table</h2>
{% endhighlight %}


<h2 id="tables-contextual-classes">Contextual classes</h2>
<h2 class="page-subheader" id="tables-contextual-classes">Contextual classes</h2>
<p>Use contextual classes to color table rows or individual cells.</p>
<div class="table-responsive table-bordered">
<table class="table table-bordered table-striped">
Expand Down Expand Up @@ -378,7 +378,7 @@ <h4>Conveying meaning to assistive technologies</h4>
<p>Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
</div>

<h2 id="tables-responsive">Responsive tables</h2>
<h2 class="page-subheader" id="tables-responsive">Responsive tables</h2>
<p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>

<div class="alert alert-danger">
Expand Down Expand Up @@ -508,7 +508,7 @@ <h4>Firefox and fieldsets</h4>
</div>
{% endhighlight %}

<h2 id="tables-calendar">Calendar tables</h2>
<h2 class="page-subheader" id="tables-calendar">Calendar tables</h2>
<p>Used for rendering the days in a month, or months in a year.</p>

<div class="bs-example" data-example-id="calendar-table">
Expand Down Expand Up @@ -595,7 +595,7 @@ <h2 id="tables-calendar">Calendar tables</h2>
{% endhighlight %}


<h2 id="tables-description-list">Description list tables</h2>
<h2 class="page-subheader" id="tables-description-list">Description list tables</h2>
<p>A mobile first table variant that uses description lists within cards on
mobile widths (xs and sm grid widths), and regular table styles when wider.</p>
<p>The description list tables can be used with the other table modifier
Expand Down Expand Up @@ -655,4 +655,144 @@ <h2 id="tables-description-list">Description list tables</h2>
</div>
</div>
{% endhighlight %}
<h2 class="page-subheader" id="tables-pricing">Pricing table</h2>
<p>Custom table to show pricing data or similar.</p>
<p>It has a featured column to highlight the TransferWise option. Use <code>.featured-header-cell</code> for <code>th</code> and <code>.featured-cell</code> for the <code>td</code>s of the column that must be featured.</p>

<div class="bs-example" data-example-id="tables-pricing">
<div class="hidden-xs hidden-sm">
<table class="table table-bordered table-pricing">
<thead>
<tr>
<th>Compare the costs</th>
<th class="featured-header-cell">TransferWise</th>
<th>Provider</th>
<th>Provider</th>
</tr>
</thead>
<tbody>
<tr>
<th>Monthly account fees</th>
<td class="featured-cell text-success">£0</td>
<td>£3.50</td>
<td>£3.50</td>
</tr>
<tr>
<th>Send £100 GBP to EUR </th>
<td class="featured-cell text-success">£1.15</td>
<td>£4.00</td>
<td>£4.00</td>
</tr>
<tr>
<th>Convert £100 GBP to EUR</th>
<td class="featured-cell text-success">£0.50</td>
<td>£4.00</td>
<td>£4.00</td>
</tr>
<tr>
<th>Receive £100 in AUD, USD, GBP and EUR</th>
<td class="featured-cell text-success">£0</td>
<td>£0</td>
<td>£0</td>
</tr>
</tbody>
</table>
</div>
<div class="visible-xs-block visible-sm-block">
<table class="table table-bordered table-pricing">
<tbody>
<tr>
<th colspan="2">Monthly account fees</th>
</tr>
<tr>
<th scope="row">TransferWise</th>
<td class="text-success">£0</td>
</tr>
<tr>
<th scope="row">Provider</th>
<td>£3.50</td>
</tr>
<tr>
<th scope="row">Provider</th>
<td>£3.50</td>
</tr>
<tr>
<th colspan="2">Send £100 GBP to EUR </th>
</tr>
<tr>
<th scope="row">TransferWise</th>
<td class="text-success">£1.15</td>
</tr>
<tr>
<th scope="row">Provider</th>
<td>£4.00</td>
</tr>
<tr>
<th scope="row">Provider</th>
<td>£4.00</td>
</tr>
</tbody>
</table>
</div>
<div class="p-t-4">
{% highlight html %}
<table class="table table-bordered table-pricing">
<thead>
<tr>
<th>Compare the costs</th>
<th class="featured-header-cell">TransferWise</th>
<th>Provider</th>
<th>Provider</th>
</tr>
</thead>
<tbody>
<tr>
<th>Monthly account fees</th>
<td class="featured-cell text-success">£0</td>
<td>£3.50</td>
<td>£3.50</td>
</tr>
<tr>
<th>Send £100 GBP to EUR </th>
<td class="featured-cell text-success">£1.15</td>
<td>£4.00</td>
<td>£4.00</td>
</tr>
<tr>
...
</tr>
</tbody>
</table>
{% endhighlight %}
</div>
<h3>The responsive view</h3>
<p>Use a double markup to show the pricing table on tablet or mobile.</p>
<p>Hide the desktop table with <code>.hidden-xs .hidden-sm</code> and show the responsive option adding <code>.visible-xs-block .visible-sm-block</code> clases.</p>

{% highlight html %}
<div class="visible-xs-block visible-sm-block">
<table class="table table-bordered table-pricing">
<tbody>
<tr>
<th colspan="2">Monthly account fees</th>
</tr>
<tr>
<th scope="row">TransferWise</th>
<td class="text-success">£0</td>
</tr>
<tr>
<th scope="row">Provider</th>
<td>£3.50</td>
</tr>
<tr>
<th scope="row">Provider</th>
<td>£3.50</td>
</tr>
...
</tr>
</tbody>
</table>
</div>
{% endhighlight %}
</div>
</div>
1 change: 1 addition & 0 deletions docs/_includes/nav/css.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
<li><a href="#tables-responsive">Responsive tables</a></li>
<li><a href="#tables-calendar">Calendar tables</a></li>
<li><a href="#tables-description-list">Description list tables</a></li>
<li><a href="#tables-pricing">Pricing table</a></li>
</ul>
</li>
<li>
Expand Down
Loading