Hack For LA Site Design System
- Resources
- Styles
- Components
- Page Templates
Buttons
Buttons are used to initialize an action. <button> tags…. <a> tags… The interchangeable classes affect different parts of the button. btn is the base class shared by all buttons. btn-primary etc indicate the button’s color. btn-xl etc. indicate the button’s size. And btn--page-specific is where you can insert any classes particular to your page (usually margins for the location of the button on the page).
Sizes
These are all of the current potential options for button sizes, determined by the btn-size classes (btn-md etc.). Make sure to switch out the color class (btn-primary) if you intend to use a different color button (see colors section further down). We use flexible names (“Medium” instead of exact measurements) because…
Medium
FPO Short write up on guidance for when to use these vs other buttons. Pages used in.
<button class="btn btn-primary btn-md btn--page-specific">Button</button>Medium-Narrow
FPO Short write up on guidance for when to use these vs other buttons. Pages used in.
<button class="btn btn-primary btn-md-narrow btn--page-specific">Button</button>Large
FPO Short write up on guidance for when to use these vs other buttons. Pages used in.
<button class="btn btn-primary btn-lg btn--page-specific">Button</button>X-Large
FPO Short write up on guidance for when to use these vs other buttons. Pages used in.
<button class="btn btn-primary btn-xl btn--page-specific">Button</button>X-Large-Long
FPO Short write up on guidance for when to use these vs other buttons. Pages used in.
<button class="btn btn-primary btn-xl-long btn--page-specific">Button</button>Colors
These are all of the current potential options for button sizes, determined by the btn-size classes (btn-md etc.). Make sure to switch out the color class (btn-primary) if you intend to use a different color button (see colors section further down).
Primary
FPO Short write up on guidance for when to use these vs other buttons. Pages used in.
<button class="btn btn-primary btn-md btn--page-specific">Button</button>Primary on Dark
FPO Short write up on guidance for when to use these vs other buttons. Pages used in.
<button class="btn btn-primary-on-dark btn-md btn--page-specific">Button</button>Dark
FPO Short write up on guidance for when to use these vs other buttons. Pages used in.
<button class="btn btn-dark btn-md btn--page-specific">Button</button>