Panels
Panel
Heading
Paragraph text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
Paragraph text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
.panel
%h4 Heading
%p
Paragraph text - Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
%p
Lorem ipsum dolor sit amet,
%a{ href: "#" } et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Panel Constrained
Paragraph text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
Lorem ipsum dolor sit amet, et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
.panel.is-constrained
%p
Paragraph text - Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
%p
Lorem ipsum dolor sit amet,
%a{ href: "#" } et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Panel Direction
Direction... like instructions
- Upload the press release and other documents
- Add a description for this show
- Add artworks to this show
- Add install shots (these can be added later)
- Select a cover for this show
.panel.is-direction
%p Direction... like instructions
%ul
%li Upload the press release and other documents
%li Add a description for this show
%li Add artworks to this show
%li Add install shots (these can be added later)
%li Select a cover for this show
Panel Notice
Complete these 5 Steps to upload a complete show.
- Upload the press release and other documents
- Add a description for this show
- Add artworks to this show
- Add install shots (these can be added later)
- Select a cover for this show
.panel.is-notice
%h4 Complete these 5 Steps to upload a complete show.
%ol
%li Upload the press release and other documents
%li Add a description for this show
%li Add artworks to this show
%li Add install shots (these can be added later)
%li Select a cover for this show
Panel Notice Centered
.panel.is-notice.text-center
%p The featured show on your profile is out of date.
%p
%a.btn.btn-large.btn-secondary-add{ href: "#" } Update Profile Feature
%p
%em You can always update this under
%a{ href: '#' }< 'Shows & Fairs'
.
Panel with Button Actions
Panel Header
Paragraph text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
.panel.actionable
.panel-content
%h4 Panel Header
%p
Paragraph text - Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
.panel-actions
%a.btn.btn-small.btn-primary.btn-full-width{ href: "#" } Save the world
Panel with Link Actions
Paragraph text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
.panel.actionable.link-actions.is-notice
.panel-content
%em
Paragraph text - Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
.panel-actions
%a{ href: "#" } Save another world