Skip to main content
LocalTapiola Turva

Layout ready

Layout component, while not visible in the user interface itself, provides a structure for other components using a one or two column layout system.

Examples

Open in new window
<duet-layout nav-distance="none">
  <duet-card heading="Main">Main content</duet-card>
  <duet-card heading="More main content">Main content</duet-card>
</duet-layout>
Open in new window
<duet-layout nav-distance="none">
  <div slot="top">
    <duet-alert icon="messaging-alert">
      A simple alert with an icon on left!
    </duet-alert>
  </div>
  <duet-card heading="Main">Main content</duet-card>
  <duet-card heading="More main content">Main content</duet-card>
</duet-layout>
Open in new window
<duet-layout nav-distance="none">
  <duet-card heading="Main">Main content</duet-card>
  <div slot="sidebar">
    <duet-card heading="Sidebar">Sidebar content</duet-card>
  </div>
</duet-layout>
Open in new window
<duet-layout nav-distance="none">
  <div slot="top">
    <duet-alert icon="messaging-alert">
      A simple alert with an icon on left!
    </duet-alert>
  </div>
  <duet-card heading="Main">Main content</duet-card>
  <div slot="sidebar">
    <duet-card heading="Sidebar">Sidebar content</duet-card>
  </div>
</duet-layout>
Open in new window
<duet-layout nav-distance="none" center>
  <duet-card heading="Main">Main content</duet-card>
  <duet-card heading="More main content">Main content</duet-card>
</duet-layout>
Open in new window
<duet-layout nav-distance="none" center>
  <div slot="top">
    <duet-alert icon="messaging-alert">
      A simple alert with an icon on left!
    </duet-alert>
  </div>
  <duet-card heading="Main">Main content</duet-card>
  <duet-card heading="More main content">Main content</duet-card>
</duet-layout>

Properties #

PropertyAttributeDescriptionTypeDefault
centercenterCenter align all direct childs of this component.booleanfalse
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
middlemiddleAlign container vertically in the middle when the space allows it.booleanfalse
navDistancenav-distanceAdjust layout’s distance to duet navigation component using this property. Useful if the page you’re working on doesn’t use the hero component. Basically adds top margin that matches the sizing of Duet Navigation. Can be one of: "none", "with-links", "without-links".stringundefined
stickystickyMakes the sidebar stick to the top of the window when scrolling down.booleanfalse
stickyDistancesticky-distanceAdjust sticky sidebar’s distance to duet navigation component using this property. Can be one of: "with-links", "without-links".string"with-links"
stickyTopsticky-topAdjust the distance from top of the viewport (in pixels) when the sidebar becomes sticky.number540

Integration

For integration, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.