.. | ||
lib | ||
.npmignore | ||
index.scss | ||
LICENSE | ||
package.json | ||
README.md | ||
stories.js |
Primer Marketing CSS Buttons
Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.
This repository is a module of the full primer-css repository.
Documentation
The buttons on our marketing pages are based on Primer's core with the addition of more color options, color outline buttons, a transparent button, and larger button sizes.
Color
The btn
has been extended with the marketing color palette:
<button class="btn btn-orange" type="button">Button button</button>
<a class="btn btn-purple" href="#url" role="button">Link button</a>
<button class="btn btn-blurple" type="button">Button button</button>
Outline buttons
The btn-outline
has also been extended with the marketing color palette:
<button class="btn btn-outline-orange" type="button">Button button</button>
<a class="btn btn-outline-purple" href="#url" role="button">Link button</a>
<button class="btn btn-outline-green" type="button">Button button</button>
<div class="bg-gray-dark p-4 mt-4">
<button class="btn btn-transparent" type="button">
Button button
<span class="Counter">12</span>
</button>
</div>
Additional sizing
There are cases where you might want to increase the size of a button, for example when putting a main CTA inside of a jumbotron or major page callout. The btn-large
class does the following to make a button more prominent:
- Adds extra additional padding in
ems
so that the padding scales proportionately with thefont-size
- Increases the border radius to 6px
It can optionally be used in combination with a font-size utility (like f3
) on the parent to increase the font-size.
<p class="f3">
<a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
<button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
</p>
Install
This repository is distributed with npm. After installing npm, you can install primer-marketing-buttons
with this command.
$ npm install --save primer-marketing-buttons
Usage
The source files included are written in Sass (scss
) You can simply point your sass include-path
at your node_modules
directory and import it like this.
@import "primer-marketing-buttons/index.scss";
You can also import specific portions of the module by importing those partials from the /lib/
folder. Make sure you import any requirements along with the modules.
Build
For a compiled css version of this module, a npm script is included that will output a css version to build/build.css
$ npm run build
License
MIT © GitHub