Packages

surface_bulma

0.3.2
0.6.3 0.6.2 0.6.1 0.6.0 0.5.2 0.5.1 0.5.0 0.4.0 0.3.3 0.3.2 0.3.1 0.2.1 0.2.0 0.1.1 0.1.0

A set of simple Surface components based on Bulma.

HexDocs

Current section

Files

Jump to
Readme
15 Versions
3 Dependencies
Dependants
Files
Activity
surface_bulma priv catalogue card example01.ex
Raw

priv/catalogue/card/example01.ex 

defmodule SurfaceBulma.Catalogue.Card.Example01 do

  @moduledoc """

  Example using all of the available sub-components (Header, Image, Footer).

  """



  use Surface.Catalogue.Example,

    subject: SurfaceBulma.Card,

    catalogue: SurfaceBulma.Catalogue,

    height: "800px",

    title: "All Sub-Components (Header, Image, Footer)"



  alias SurfaceBulma.Icon



  def render(assigns) do

    ~F"""

    <Card>

      <Card.Header>

        <Card.Header.Title>

          This is the title

        </Card.Header.Title>

        <Card.Header.Icon>

          <Icon.FontAwesome icon="user-circle" />

        </Card.Header.Icon>

      </Card.Header>

      <Card.Image>

        <figure class="image is-4by3">

          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">

        </figure>

      </Card.Image>



      <div class="content">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

        <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>

        <br>

        <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>

      </div>



      <Card.Footer>

        <Card.FooterItem><a href="#">Item 1</a></Card.FooterItem>

        <Card.FooterItem><a href="#">Item 2</a></Card.FooterItem>

        <Card.FooterItem><a href="#">Item 3</a></Card.FooterItem>

      </Card.Footer>

    </Card>

    """

  end

end