gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(BrandButtons): minor temp fixes with stylings

Browse Source
This commit is contained in:
xidedix 2020-12-14 18:09:23 +01:00
parent 9522ade1f1
commit f0c0585832
3 changed files with 108 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/scss/_fixes.scss Normal file
View File

@ -0,0 +1,16 @@
// todo: disabled button styles
button {
&:disabled {
cursor: default;
}
&.disabled {
cursor: default;
}
}
// todo: brand button icon margin
.btn-brand:not(:only-child) {
.c-icon {
margin-top: 0 !important;
}
}

3
src/scss/style.scss
View File

@ -4,5 +4,8 @@
// Import CoreUI styles // Import CoreUI styles
@import "~@coreui/coreui/scss/coreui.scss"; @import "~@coreui/coreui/scss/coreui.scss";
// Some temp fixes
@import "fixes";
// If you want to add something do it here // If you want to add something do it here
@import "custom"; @import "custom";

178
src/views/buttons/brand-buttons/BrandButtons.js
View File

@ -19,68 +19,68 @@ const BrandButtons = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>Size Small <h6>Size Small
<small> Add this class <code>.btn-sm</code></small> <small> <code>size="sm"</code></small>
</h6> </h6>
<p> <p>
<CButton size="sm" className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /><span>Facebook</span></CButton> <CButton size="sm" className="btn-facebook btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-facebook" /><span className="mfs-2">Facebook</span></CButton>
<CButton size="sm" className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /><span>Twitter</span></CButton> <CButton size="sm" className="btn-twitter btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-twitter" /><span className="mfs-2">Twitter</span></CButton>
<CButton size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /><span>LinkedIn</span></CButton> <CButton size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-linkedin" /><span className="mfs-2">LinkedIn</span></CButton>
<CButton size="sm" className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /><span>Flickr</span></CButton> <CButton size="sm" className="btn-flickr btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-flickr" /><span className="mfs-2">Flickr</span></CButton>
<CButton size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /><span>Tumblr</span></CButton> <CButton size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-tumblr" /><span className="mfs-2">Tumblr</span></CButton>
<CButton size="sm" className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span>Xing</span></CButton> <CButton size="sm" className="btn-xing btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-xing" /><span className="mfs-2">Xing</span></CButton>
<CButton size="sm" className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /><span>Github</span></CButton> <CButton size="sm" className="btn-github btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-github" /><span className="mfs-2">Github</span></CButton>
<CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /><span>StackOverflow</span></CButton> <CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-stackoverflow" /><span className="mfs-2">StackOverflow</span></CButton>
<CButton size="sm" className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /><span>YouTube</span></CButton> <CButton size="sm" className="btn-youtube btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-youtube" /><span className="mfs-2">YouTube</span></CButton>
<CButton size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span>Dribbble</span></CButton> <CButton size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-dribbble" /><span className="mfs-2">Dribbble</span></CButton>
<CButton size="sm" className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /><span>Instagram</span></CButton> <CButton size="sm" className="btn-instagram btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-instagram" /><span className="mfs-2">Instagram</span></CButton>
<CButton size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /><span>Pinterest</span></CButton> <CButton size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-pinterest" /><span className="mfs-2">Pinterest</span></CButton>
<CButton size="sm" className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /><span>VK</span></CButton> <CButton size="sm" className="btn-vk btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-vk" /><span className="mfs-2">VK</span></CButton>
<CButton size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /><span>Yahoo</span></CButton> <CButton size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-yahoo" /><span className="mfs-2">Yahoo</span></CButton>
<CButton size="sm" className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /><span>Behance</span></CButton> <CButton size="sm" className="btn-behance btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-behance" /><span className="mfs-2">Behance</span></CButton>
<CButton size="sm" className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /><span>Reddit</span></CButton> <CButton size="sm" className="btn-reddit btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-reddit" /><span className="mfs-2">Reddit</span></CButton>
<CButton size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /><span>Vimeo</span></CButton> <CButton size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-vimeo" /><span className="mfs-2">Vimeo</span></CButton>
</p> </p>
<h6>Size Normal</h6> <h6>Size Normal</h6>
<p> <p>
<CButton className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /><span>Facebook</span></CButton> <CButton className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /><span className="mfs-2">Facebook</span></CButton>
<CButton className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /><span>Twitter</span></CButton> <CButton className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /><span className="mfs-2">Twitter</span></CButton>
<CButton className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /><span>LinkedIn</span></CButton> <CButton className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /><span className="mfs-2">LinkedIn</span></CButton>
<CButton className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /><span>Flickr</span></CButton> <CButton className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /><span className="mfs-2">Flickr</span></CButton>
<CButton className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /><span>Tumblr</span></CButton> <CButton className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /><span className="mfs-2">Tumblr</span></CButton>
<CButton className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span>Xing</span></CButton> <CButton className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span className="mfs-2">Xing</span></CButton>
<CButton className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /><span>Github</span></CButton> <CButton className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /><span className="mfs-2">Github</span></CButton>
<CButton className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /><span>StackOverflow</span></CButton> <CButton className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /><span className="mfs-2">StackOverflow</span></CButton>
<CButton className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /><span>YouTube</span></CButton> <CButton className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /><span className="mfs-2">YouTube</span></CButton>
<CButton className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span>Dribbble</span></CButton> <CButton className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span className="mfs-2">Dribbble</span></CButton>
<CButton className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /><span>Instagram</span></CButton> <CButton className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /><span className="mfs-2">Instagram</span></CButton>
<CButton className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /><span>Pinterest</span></CButton> <CButton className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /><span className="mfs-2">Pinterest</span></CButton>
<CButton className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /><span>VK</span></CButton> <CButton className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /><span className="mfs-2">VK</span></CButton>
<CButton className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /><span>Yahoo</span></CButton> <CButton className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /><span className="mfs-2">Yahoo</span></CButton>
<CButton className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /><span>Behance</span></CButton> <CButton className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /><span className="mfs-2">Behance</span></CButton>
<CButton className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /><span>Reddit</span></CButton> <CButton className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /><span className="mfs-2">Reddit</span></CButton>
<CButton className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /><span>Vimeo</span></CButton> <CButton className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /><span className="mfs-2">Vimeo</span></CButton>
</p> </p>
<h6>Size Large <h6>Size Large
<small> Add this class <code>.btn-lg</code></small> <small> <code>size="lg"</code></small>
</h6> </h6>
<p> <p>
<CButton size="lg" className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /><span>Facebook</span></CButton> <CButton size="lg" className="btn-facebook btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-facebook" /><span className="mfs-2">Facebook</span></CButton>
<CButton size="lg" className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /><span>Twitter</span></CButton> <CButton size="lg" className="btn-twitter btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-twitter" /><span className="mfs-2">Twitter</span></CButton>
<CButton size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /><span>LinkedIn</span></CButton> <CButton size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-linkedin" /><span className="mfs-2">LinkedIn</span></CButton>
<CButton size="lg" className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /><span>Flickr</span></CButton> <CButton size="lg" className="btn-flickr btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-flickr" /><span className="mfs-2">Flickr</span></CButton>
<CButton size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /><span>Tumblr</span></CButton> <CButton size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-tumblr" /><span className="mfs-2">Tumblr</span></CButton>
<CButton size="lg" className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span>Xing</span></CButton> <CButton size="lg" className="btn-xing btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-xing" /><span className="mfs-2">Xing</span></CButton>
<CButton size="lg" className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /><span>Github</span></CButton> <CButton size="lg" className="btn-github btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-github" /><span className="mfs-2">Github</span></CButton>
<CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /><span>StackOverflow</span></CButton> <CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-stackoverflow" /><span className="mfs-2">StackOverflow</span></CButton>
<CButton size="lg" className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /><span>YouTube</span></CButton> <CButton size="lg" className="btn-youtube btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-youtube" /><span className="mfs-2">YouTube</span></CButton>
<CButton size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span>Dribbble</span></CButton> <CButton size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-dribbble" /><span className="mfs-2">Dribbble</span></CButton>
<CButton size="lg" className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /><span>Instagram</span></CButton> <CButton size="lg" className="btn-instagram btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-instagram" /><span className="mfs-2">Instagram</span></CButton>
<CButton size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /><span>Pinterest</span></CButton> <CButton size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-pinterest" /><span className="mfs-2">Pinterest</span></CButton>
<CButton size="lg" className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /><span>VK</span></CButton> <CButton size="lg" className="btn-vk btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-vk" /><span className="mfs-2">VK</span></CButton>
<CButton size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /><span>Yahoo</span></CButton> <CButton size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-yahoo" /><span className="mfs-2">Yahoo</span></CButton>
<CButton size="lg" className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /><span>Behance</span></CButton> <CButton size="lg" className="btn-behance btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-behance" /><span className="mfs-2">Behance</span></CButton>
<CButton size="lg" className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /><span>Reddit</span></CButton> <CButton size="lg" className="btn-reddit btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-reddit" /><span className="mfs-2">Reddit</span></CButton>
<CButton size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /><span>Vimeo</span></CButton> <CButton size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-vimeo" /><span className="mfs-2">Vimeo</span></CButton>
</p> </p>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -94,26 +94,26 @@ const BrandButtons = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>Size Small <h6>Size Small
<small> Add this class <code>.btn-sm</code></small> <small> <code>size="sm"</code></small>
</h6> </h6>
<p> <p>
<CButton size="sm" className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /></CButton> <CButton size="sm" className="btn-facebook btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-facebook" /></CButton>
<CButton size="sm" className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /></CButton> <CButton size="sm" className="btn-twitter btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-twitter" /></CButton>
<CButton size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /></CButton> <CButton size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-linkedin" /></CButton>
<CButton size="sm" className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /></CButton> <CButton size="sm" className="btn-flickr btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-flickr" /></CButton>
<CButton size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /></CButton> <CButton size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-tumblr" /></CButton>
<CButton size="sm" className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /></CButton> <CButton size="sm" className="btn-xing btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-xing" /></CButton>
<CButton size="sm" className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /></CButton> <CButton size="sm" className="btn-github btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-github" /></CButton>
<CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /></CButton> <CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-stackoverflow" /></CButton>
<CButton size="sm" className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /></CButton> <CButton size="sm" className="btn-youtube btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-youtube" /></CButton>
<CButton size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /></CButton> <CButton size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-dribbble" /></CButton>
<CButton size="sm" className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /></CButton> <CButton size="sm" className="btn-instagram btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-instagram" /></CButton>
<CButton size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /></CButton> <CButton size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-pinterest" /></CButton>
<CButton size="sm" className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /></CButton> <CButton size="sm" className="btn-vk btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-vk" /></CButton>
<CButton size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /></CButton> <CButton size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-yahoo" /></CButton>
<CButton size="sm" className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /></CButton> <CButton size="sm" className="btn-behance btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-behance" /></CButton>
<CButton size="sm" className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /></CButton> <CButton size="sm" className="btn-reddit btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-reddit" /></CButton>
<CButton size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /></CButton> <CButton size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-vimeo" /></CButton>
</p> </p>
<h6>Size Normal</h6> <h6>Size Normal</h6>
<p> <p>
@ -136,26 +136,26 @@ const BrandButtons = () => {
<CButton className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /></CButton> <CButton className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /></CButton>
</p> </p>
<h6>Size Large <h6>Size Large
<small> Add this class <code>.btn-lg</code></small> <small> <code>size="lg"</code></small>
</h6> </h6>
<p> <p>
<CButton size="lg" className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /></CButton> <CButton size="lg" className="btn-facebook btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-facebook" /></CButton>
<CButton size="lg" className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /></CButton> <CButton size="lg" className="btn-twitter btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-twitter" /></CButton>
<CButton size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /></CButton> <CButton size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-linkedin" /></CButton>
<CButton size="lg" className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /></CButton> <CButton size="lg" className="btn-flickr btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-flickr" /></CButton>
<CButton size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /></CButton> <CButton size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-tumblr" /></CButton>
<CButton size="lg" className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /></CButton> <CButton size="lg" className="btn-xing btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-xing" /></CButton>
<CButton size="lg" className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /></CButton> <CButton size="lg" className="btn-github btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-github" /></CButton>
<CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /></CButton> <CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-stackoverflow" /></CButton>
<CButton size="lg" className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /></CButton> <CButton size="lg" className="btn-youtube btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-youtube" /></CButton>
<CButton size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /></CButton> <CButton size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-dribbble" /></CButton>
<CButton size="lg" className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /></CButton> <CButton size="lg" className="btn-instagram btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-instagram" /></CButton>
<CButton size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /></CButton> <CButton size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-pinterest" /></CButton>
<CButton size="lg" className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /></CButton> <CButton size="lg" className="btn-vk btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-vk" /></CButton>
<CButton size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /></CButton> <CButton size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-yahoo" /></CButton>
<CButton size="lg" className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /></CButton> <CButton size="lg" className="btn-behance btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-behance" /></CButton>
<CButton size="lg" className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /></CButton> <CButton size="lg" className="btn-reddit btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-reddit" /></CButton>
<CButton size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /></CButton> <CButton size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-vimeo" /></CButton>
</p> </p>
</CCardBody> </CCardBody>
</CCard> </CCard>