Shadows
Add or remove shadows to elements with box-shadow utilities.
Shadow
You can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes.
import React from 'react';
const Shadow = () => {
return (
<>
<div className="w-75p h-75p bg-grey-light-4 shadow-none" />
<div className="w-75p h-75p bg-grey-light-4 shadow-sm" />
<div className="w-75p h-75p bg-grey-light-4 shadow" />
<div className="w-75p h-75p bg-grey-light-4 shadow-lg" />
<div className="w-75p h-75p bg-grey-light-4 shadow-xl" />
</>
);
}
export default Shadow;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
| Class | Values |
|---|---|
className="shadow-[Value]" | none / sm / lg / xl |
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Shadow Direction
Change the directions of shadow on the go.
import React from 'react';
const ShadowDirections = () => {
return (
<>
<div className="w-75p h-75p bg-grey-light-4 shadowDirections shadow-top" />
<div className="w-75p h-75p bg-grey-light-4 shadow shadow-bottom" />
<div className="w-75p h-75p bg-grey-light-4 shadow shadow-start" />
<div className="w-75p h-75p bg-grey-light-4 shadow shadow-end" />
</>
);
}
export default ShadowDirections;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
| Class | Values |
|---|---|
className="shadow shadow-[value]" | top / bottom / start / end |
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Shadow Hover
Add hover effect by adding .shadow-hover class. For additional sizes add .shadow-hover-*modifier classes.
import React from 'react';
const ShadowHover = () => {
return (
<>
<div className="w-75p h-75p bg-grey-light-4 shadow-none shadow-hover-sm" />
<div className="w-75p h-75p bg-grey-light-4 shadow-sm shadow-hover" />
<div className="w-75p h-75p bg-grey-light-4 shadow-lg shadow-hover-xl" />
<div className="w-75p h-75p bg-grey-light-4 shadow-xl shadow-hover-sm" />
</>
);
}
export default ShadowHover;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
| Class | Values |
|---|---|
classnName="shadow-hover-[value]" | none / sm / lg / xl |
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Shadow Colors Option
Add hover effect by adding .shadow-hover class. For additional sizes add .shadow-hover-*modifier classes.
import React from 'react';
const ShadowColors = () => {
return (
<>
<div className="w-75p h-75p bg-grey-light-4 shadow-primary" />
<div className="w-75p h-75p bg-grey-light-4 shadow-red" />
<div className="w-75p h-75p bg-grey-light-4 shadow-blue" />
<div className="w-75p h-75p bg-grey-light-4 shadow-danger" />
</>
);
}
export default ShadowColors;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
| Class | Values |
|---|---|
className="shadow-[value]" | primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.